A touch of class

Cascading style sheets give site authors a lot of power to play around with. Unfortunately, with that extra power comes the opportunity to abuse markup if you’re not careful. The W3C say so themselves:

Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the class attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.

So when is it right to use classes?

The short answer

The short answer is, not much of the time. Use classes when you can’t find anything else at all that will let you select the elements a different way.

The long(er) answer

Before you go and use a class you should check to make sure that none of the following would work instead:

• Is the element you’re wanting to style unique on the page? If so, use an id. An id atribute can be applied to any element on the page, and must be a unique identifier which can’t begin with a number. After you’ve applied an id to an element you can select it for styling by using the selector #id. For example, to select a div with an id of monkey you would use the selector #monkey.
• Are the elements you want to style the only of their type within a uniquely identified object? For example, if you had a list of links that was the only list of links within a div with an id of menu, then you should select them using that.
• Is there an existing HTML tag that you can use on the items you want to style, and is the display you want to use typical of how all elements with that tag would be displayed? If so, just use and style that tag. For example, using the <q> tag for marking up quotations, or the <code> tag for marking up fragments of code. HTML includes many of these semantic markup tags.
• Is there an existing selector you could use to identify just these types of tags, for example the href starting off with http:// to select external links? Use that instead. (Of course this one might vary, depending on browser support for the selector and how necessary it is for everyone to be able to see the effect. If you do find yourself having to use a class in this situation, you should use the other selector too, so that in the future you can yank the class out and it’ll still work.)
• So on…

Wrap-up

If you can think logically through the problem and find some other way of selecting the element using semantic markup, you should always use that. Markup already defined is useful to non-human processes (such as a search engine spidering your page) as well, since it already has a defined meaning, as opposed to your classes, which machines wouldn’t have a clue about. If you go through your code and think about other ways to select your items, I would be extremely surprised if you needed more than 2 or 3 classes.

The only situation I can think of which would need a lot of classes would be marking up something HTML wasn’t designed for, in which case you should probably be using your own XML-based language instead.