How to use the class attribute of HTML elements.

So with the rise of CSS, two very useful attributes of HTML tags are “id” and “class” attributes.

For example:

These are useful in CSS because we can write CSS rules using CSS selectors to target the presentation of these elements. We can also use these attributes to target actions based in Javascript.

When should one use one or the other, I think the intent is that:

• id is meant to be when there is a single unique instance of something.

• class is meant to be when we have category of elements.

Hmmm.

To me it feels like this could be a place where the designers of HTML might have solved a problem they didn’t fully understand and put in more features into HTML that we needed.

If we make use of namespaces could we get away with only using the class attribute and therefore simplifying our overall design?

I think the other key design concept to keep in mind with class attributes is separation of concerns. It will make for much cleaner and more stable designs by making sure classes are only used for one purpose. i.e. a class used for a Javascript action should not be used to apply a styling rule.

Only using classes avoids the cognitive load of having to choose whether to use a class or an id attribute.