views:

369

answers:

7

If I have class names such as "left", "right", "clear" and xhtml like

<a href="index.php" class="right continueLink">Continue</a>

With CSS like

.right {
float: right;
}

I know it's not a semantic name, but it does make things much easier sometimes.

Anyway, what are your thoughts?

+1  A: 

It might be advisable to avoid names that are the same as values in the CSS specs to avoid confusion. Especially in situations where multiple developers work on the same application.

Other than that I see no problem. I would qualify the right or left name like this: menuleft, menuright etc.

Vincent Ramdhanie
+13  A: 

I don't think that's a very good idea. Now when you (or a future maintainer) go to change your website layout, you'll either have to change .right to {float:left;} (obviously a bad idea) or go through all your HTML files and change right to left.

Why do you want that particular link to be floated right, and the other .continueLink's not to? Use the answer to that question to choose a more descriptive class name for that link.

yjerem
I do agree with you. I was editing an existing system that had no care for semantics, so I decided to make life easier for myself by doing this with CSS. Though I'd never do this for my own projects.
alex
In almost every case, I'd totally agree with you. However, there's one case that I just cannot resolve other than by using "left" and "right": the placement of floated images within an article. The exact choice is more-or-less arbitrary; there is really nothing else to distinguish the images.
Bobby Jack
In the case that Bobby Jack describes, I would say it's OK. Although you could simplify the markup by having Javascript add those classes to every other image so that the float directions change.
Nathan Long
+6  A: 

css is about presentation of the structure of your html page.

Meaning its classes should represent the structure of the document ('article', 'extra-links', 'glossary', 'introduction', 'conclusion', ...).

You should avoid any class linked to a physical representation ('left', 'right', 'footnotes', 'sidenotes', ...), because, as the Zen Garden so clearly illustrates, you can decide to place any div in very different and various ways.

VonC
you're right, but "footnotes" is a poor example, since that actually does describe a structural element of a document (regardless of where it's laid out). it's no different to a "HEADing"
nickf
I knew you were going to say that ;-) BUT the definition of footnotes explicitly refers to the 'bottom of the page', a 'physical' location. I would prefer a more generic term, as 'comments' or 'relatedNotes' or simply 'notes'. See http://dictionary.reference.com/browse/footnote
VonC
+1  A: 

The purists will say don't do it, and the pragmatists will say it's fine. But would the purists define .right as float: left?

eyelidlessness
you might want to one day...
nickf
Sure, but I'm a pragmatist, and I'd probably change the classes to .left
eyelidlessness
And then you'd have to change all of your html as well as your css. That's the point that 'purists' are trying to make.
Traingamer
I'd actually only need to change certain bits of my HTML, and quite probably just one instance if I designed the view correctly in the first place.
eyelidlessness
+1  A: 

Being a purist, I say no don't do it. For reasons mentioned earlier.

Being a pragmatist, I just wanted to say that never have I seen website rework that involved pure html changes without css, or pure css without html, simply because both parts are being developed with the other in mind. So, in reality, if somebody else would EVER need to change the page, I bet my salary they will change both html and css.

The above is something that collegue purists around often tend to ignore, even though it's reality. But bottom line; no, avoid using a className such as "right". :-)

Martin Kool
I'm not after your salary but I just have to comment that we just finished a website rework that included no html changes what so ever. Only the css and text content were changed (text is loaded from a resource bundle)
Gene
Wow, for me that really is an eye opener Gene, so I am glad to see me proven wrong. I do feel that your experience in this particular project is the exception to the rule, what what was your experience with other projects in the past?
Martin Kool
A: 

.right and other classes like that, certainly makes it quick to write create a tag with a float:right rule attached to it, but I think this method has more disadvantages than advantages:

Often a class-style with a single float:right; in it will lack something, your example wil only float right if the other class rule contains a display:block in it, since an "a" tag is not a block level element. Also floating elements more often than not needs to have width an height attached. This means that the code in your example needs additional code to do what it says, and you have to search in two places when you have to change your css.

I tend to style my html by dividing the page into different div-tags with unique id's, and then styling elements in these div by inheritance like this.

div#sidebar { float:right; width:200px; }
div#sidebar ul { list-style-type:none; }

This makes it possible to partition my css files, so that it is easy to find the css-code that styles a particular tag, but if you introduce .right and other classes you are starting to disperse the rules into different areas of the css file, making the site more difficult to maintain.

I think the idea of having a very generic classes is born from the wish of making it possible to change the entire layout of the site by changing a couple of rules in a stylesheet, but I must say that in my 8 years of website development with 30+, different sites under my belt i haven't once changed the layout of a website and reused the HTML.

What I have done countless times is making small adjustments to regions of pages, either due to small changes in the design or to the introduction of new browsers. So I'm all for keeping my css divided into neat chunks that makes it easy to find the rules I am looking for, and not putting the code in different places to achieve a shorter stylesheet.

Regards Jesper Hauge

Hauge
A: 

Yeah, semantically speaking it is wrong, but, for example, there are times when I'm positioning images within a block of body copy and I'll give them the class "right".

Maybe "alt" is a more suitable class name.

Samuel Cotterall