Should css class names like 'floatleft' that directly describe the attached style be avoided?

Question

Lots of websites use class names like floatleft, clearfloat, alignright, small, center etc that describe the style that is attached to the class. This seems to make sense so when writing new content you can easily wrap (for example) <div class="clearfloat">...</div> around your element to make it behave the way you want.

My question is, doesn't this style of naming classes go against the idea of separating content from presentation? Putting class="floatleft" on an element is clearly putting presentation information into the HTML document.

Should class names like this that directly describe the attached style be avoided, and if so what alternative is there?

---

To clarify, this isn't just a question of what to name classes. For example a semantically accurate document might look something like:

<div class="foo">Some info about foo</div> ... <div class="bar">Info about unrelated topic bar</div> ... <div class="foobar">Another unrelated topic</div> 

Say all these divs need to clear floats, the css would look something like:

div.foo, div.bar, div.foobar {     clear:both; } 

This starts to get ugly as the number of these clearing elements increases - whereas a single class="clearfloat" would serve the same purpose. Is it recommended to group elements based on the attached styles to avoid repetition in the CSS, even if this means presentational information creeps into the HTML?

---

Update: Thanks for all the answers. The general consensus seems to be to avoid these class names in favour of semantic names, or at least use them sparingly provided they don't hinder maintenance. I think the important thing is that changes in the layout should not require excessive changes to the markup (although a few people said minor changes are okay if it makes overall maintenance easier). Thanks to those who suggested other methods to keep CSS code smaller as well.

Answer 1

It's great until you re-design, and narrow is highlighted yellow, center converts better left-justified, and the image you called floatleft now belongs on the right.

I'll admit to the sin of using floatleft and clear as CSS class names, but it is much easier to maintain your CSS if you choose names that relate to the semantic meaning of the content, like feedback and heroimage.

Answer 2

Presentational class names

The HTML spec is clear on this issue:

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

Does clearleft describe the nature of the content? Not really. Eric Meyer made a joke about this a while ago.

Try to find a structural relation between the seemingly unrelated elements

Let's say you have paragraphs about ducks, paragraphs about monkeys and paragraphs about frogs. You want them have a blue background.

<p class="duck"></p> <p class="monkey"></p> <p class="frog"></p> 

You could add this CSS rule:

p.duck, p.monkey, p.frog {     background-color: blue; } 

But aren't they all animals? Just add another animal token:

<p class="animal duck"></p> <p class="animal monkey"></p> <p class="animal frog"></p> 

And change the CSS rule to:

p.animal {     background-color: blue; } 

It is hard and it might not always be possible but the important thing is not to give up quickly.

What if you can't?

If you have a lot of elements with absolutely no structural relation between them, that indicates a structural problem with your document. Try to decrease these elements. That said, grouping n CSS selectors on one rule is still better than adding n presentational class tokens in your HTML document.