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

Solution 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.

Solution 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.

Solution 3:

Style classes should be semantic. This is a great article on semantic web page design (well, I found it really helpful anyway).

EDIT: I just read another article that makes some good points for using things like display: inline-block, display: table etc. instead of floats. That should help avoid those pesky floatleft and clearfix classes. Making them semantic is always up to you though.

Solution 4:

The main problem with having classes named floatleft, clear or the like is the fact that changes in the design imply changes in the HTML markup. This should not happen, true separation between content and presentation is achieved only when you can re-use the same markup in multiple designs or even media (think sharing the same HTML between desktop and mobile versions of your site and only switching sylesheets).

Now, for a practical example :). To add on Fredrik's answer, LESSCSS allow you to hide styles declarations/mixins from developers. This way you can protect reusable components in your stylesheets without the danger of having them pop up in your HTML.

Sample markup:

<div class="branding">Company Name</div>

Sample less code:

// example of reusable functions
.noText() {
    color: transparent;
    text-indent: -9999px;
}
.clear-after() {
    &:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
    }
}

.branding {
    .clear-after();
    .noText();
    background-image: ...;
}

Of course, for mobile you might just want to have the company name in bold, without any other styling:

.branding {
    color: pink;
    font-weight: bold;
}

Solution 5:

I think it depends on how you are using the styles.

Content should be named accordingly, as the style may change but the content will likely remain the same.

For instance, if you have a div that contains stock info, you should name the div something like div class="stockInfo", so that no matter what the presentation, you can change the styles and the name will not contradict those styles (as opposed to naming the div div class="yellow" and then changing the background-color to red).

However you will have "helper styles" and these should be named for what they do.

For instance, you will likely want to use a <br /> to clear some floats. In this case, it is perfectly reasonable to name it <br class="clear" /> and to give it a style of br {clear:both;}.

Again, most Web sites float their images right or left. To assist with this, you can set <img class="right" src="" /> and <img class="left" src="" /> and then have the styles to match, img.right {float:right;} etc.

So it depends on the usage.