static.html

— a blog about web development and whatnot by Steve Webster

I often hear developers refer to the “css class attribute”, something that to my knowledge doesn't actually exist. There is a class attribute in HTML, but there's much more you can do with that than just make your content look pretty.

Jeff Atwood recently wrote about how awkward he found the draft hResume Microformat to implement on Stack Overflow. If you're not familiar with Microformats, the following definition taken directly from the Microformats wiki might help:

Microformats are small patterns of HTML to represent commonly published things like people, events, blog posts, reviews and tags in web pages.

Microformats enable the publishing of higher fidelity information on the Web; the fastest and simplest way to provide feeds and APIs for the information in your website.

Put simply, Microformats attempt to add extra semantic constructs to HTML by creating standard data structures for common patterns. Where existing HTML elements aren't expressive enough, Microformats often use the class attribute to convey the meaning of a piece of data.

Getting back to Jeff's article, one of the criticisms he levelled at Microformats in general was:

We're overloading the class attribute with two meanings. Is "adr" the name of a class that contains styling information, or the name of a data field? Or both? It's impossible to tell. The minute you introduce a microformat into your HTML, the semantics of the class attribute have been permanently altered.

This represents a fundamental misunderstanding of the purpose of the class attribute; that it's all about providing CSS hooks for styling purposes. The HTML 4.01 specification makes it explicitly clear that the class attribute has uses beyond CSS styling:

The class attribute … assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:

  • As a style sheet selector (when an author wishes to assign style information to a set of elements).
  • For general purpose processing by user agents.

That the class attribute can be used for styling purposes doesn't mean that you can't also use it for other purposes. In fact, if you've ever added a class name so that you could later get at an element or collection of elements using JavaScript — using a jQuery class selector, for example — you've already done exactly that.

If you're a web developer writing front-end code, you should keep your content, style and behaviour as separate as possible; it's one of the fundamental principles of progressive enhancement. Use the class and id attributes to describe your content, not what it looks like or how it will behave. This will help you to avoid class names like left, red or big-orange-border, which can double the amount of maintenance you need to do when changing how your content is presented.

Pragmatically speaking, you will sometimes end up adding class and id hooks specifically for styling or behavioural purposes. However, if you make sure that those classes remain semantic (i.e. describing the content) rather than presentational or behavioural, you will help ensure your layers remain properly separated and easy to maintain.