Feature
Post

Category
Column


Avoid Using Generic CSS Classes

The W3C has worked hard to remove presentational elements from HTML. Unfortunately, old habits don’t die easily. This has resulted in some standard generic CSS classes that are contradictory to the intention of HTML and CSS. If you are using classes like .left, .right, and .clear you are guilty as charged.

The case of center

Back before HTML 4.01 we had the center element. Its sole purpose was to center text. It was used like this:

<center>
Lorem ipsum dolor sit amet.
</center>

However, when HTML 4.01 came along the W3C gave it the axe:

The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to “center”. The CENTER element is deprecated.

W3C Spec: CENTER element

What happened to align?

Fortunately, we designers are a savvy bunch and quickly resorted to the align attribute. This crafty attribute aligns an object to the left, right, center, or justified.

<div align="center">
Lorem ipsum dolor sit amet.
</div>

But the W3C was one step ahead. They had already deprecated that attribute as well.

I hope this is clear

Since that fight was lost, we up and started using the clear attribute. Its purpose was simple, to clear floated objects on either side of an element. But they had thought of that one too.

<br clear="left" />

Without hesitation or regard they stole it away.

W3C intention

By definition HTML is a markup language. Its purpose is simply to define what a portion of text is NOT how it should look. From big to small, b, font, and i they W3C eliminated whatever defined presentational aspects of a document.

Bold and italic

Folks get confused about bold and italic so the W3C took care of care of those elements too. We did receive some replacements that are more semantically accurate, however. The strong and em tags describe the function of some text. Either it is a strong point that should be made or something that deserves emphasis.

These elements are regularly styled as bold and italic but they can be styled any way the designer chooses.

Back to CSS

<div class="left">
Lorem ipsum dolor sit amet.
</div>

Do you see any similarities between this modern, CSS based code and the classic, deprecated elements and properties I mentioned above? Yeah, it's not that much different. There would be some accompanying styles that float the element to the left or right or clear it, but the concept is the same. Presentation is being controlled from within the markup.

I will consider my point made.

Conclusion

Rather than using generic classes, try using a class name that accurately describes the content. For example, if you use a big image at the beginning of your posts, give it a class of main-image. You can still float it the same way as always, but you have avoided semantics that confuse markup and presentation.

Kudos

This article was inspired by a section of Web Design+. It is a great document that details some common best practices for working with HTML and CSS. I recommend reading it.

Furthermore, this should not be construed as a criticism of the author. My hope is that it will help to promote a better understanding of HTML and its intent as defined by the W3C.


  1. By Bram Van der Sype posted on February 1, 2009 at 6:55 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Agreed, point made, but! What if you have a (semi-) complicated layout that needs several floated divs that require no additional styling except for different floating.

    I could follow your point and name them all appropriate names, and then just put all those in my css file. Agreed, semantically, I can see why this is “better”.

    But what about a “clear” class? When you have a lot of floats in a container, sometimes, all you need is a div to clear them. As far as I can see, there’s no semantically correct way to name them, as all they have to do is “clear”. The stupid part is that we have to use those divs (or whatever element you prefer) to clear your floats, or your container won’t like it much. Maybe the positioniseverything.com easy clearing way is the way to go (http://www.positioniseverything.net/easyclearing.html) however, I’ve always disliked conditional comments for IE…

  2. By Harry Roberts posted on February 1, 2009 at 8:03 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hmm;

    ‘Presentation is being controlled from within the markup.’

    I see your point, but that’s a little incorrect. Presentation isn’t being controlled in the same was as deprecated tags. It isn’t being controlled though markup at all. The align etc attributes do control presentation through markup as they make presentational changes through markup *alone*. Applying a generic class name however provides a *hook* for CSS to alter the presentation. Two very separate things.

    Your point(s) regarding semantics however are extremely valid and have prompted me to add additional note: http://csswizardry.com/web-design+/#css4-3-reactions

    Cheers,
    Harry

  3. By jaredmellentine posted on February 2, 2009 at 12:32 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Sure. I can see your point, but I think there are some holes in it. The reason the <center> tag and the align attribute have been deprecated is to emphasize CSS. Maybe “text-align: left;” is too basic an example. Here’s a better one:

    I setup helper classes with nearly every stylesheet I have. They include: .fl/.fr (floats), .cl/.cr/.cb (clears), .m/.mt/.mr/.mb/.ml (margins – based on the design), .b (bold) and .l/.c/.r (text-aligns). I guess it’s a designer preference, but it’s simple for me to create an element that clears and is floated left with a right margin (“cb fl mr”). The code is condensed – especially when using Javascript – and easy to remember.

    My process doesn’t work for everyone because some people just can’t remember what the classes stand for. But it seems a little ridiculous to have a unique class for every element that needs to be styled.

  4. By Dustin Boston posted on February 2, 2009 at 1:07 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    @jaredmellentine – That’s a good point that the W3C wanted to emphasize CSS. I don’t think it was the only reason. But good point.

    @harry – Thanks for responding! What I meant was that you had to hard code something in the HTML in order to achieve the presentational effect.

  5. By NM posted on February 2, 2009 at 5:45 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Take a step back, and look at what you’ve written. You’ve described schizophrenia. First HTML contained ‹center›, ‹b›, ‹i› … then it’s supposed to be outside of its scope. This is IMO an indication that something’s wrong here. ‹strong› or ‹em› is not much more abstract than ‹b› or ‹i›, merely more obtuse. Besides, italics do not always denote emphasis.
    Finally HTML is designed to make describe documents, but in reality, it’s mostly used to program interfaces. Just look at this page; look at the top, the right column and the bottom part: it’s interface. The document is less than half of the content.

  6. By Jonas posted on February 4, 2009 at 11:20 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Actually, on most of my websites I try to use only two or three letter names for classes, simply for identification. What floats left today may be floating right tomorrow. I do not want to run into redesign-trouble.

  7. By Leon Paternoster posted on March 22, 2009 at 9:07 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi Dustin,

    I used to think like this. However, I now think classes have absolutely no semantic value except to someone reading the HTML. The only elements that aid a document’s meaning are tags. So it really doesn’t matter if you use class="clear no-margin 2-col" or class="aside", as long as you’re using the correct tag (and if you are using lots of DIVs for ‘hooking’ purposes, your tags between the DIVs are meaningful).

    That’s why HTML5 is so promising: we get lots more meaningful tags, such as aside and section, which should mean less DIVs.

  8. TrackbackWeight Loss Blogs — Wp Point | Wordpress Theme ViewerMarkup debates: rank priorities, code accordingly | Wisdumptj mapes » Blog Archive » What I’m Reading (weekly)