the class attribute
The id attribute is handy when singling out unique elements within a document or across related documents. But what if we want to target a range of identical elements, or elements that can occur more than once on a single page? A problem that is actually a lot more common.
To solve this, html gives us the class attribute. An attribute that is closely related to the id, but with a different purpose. Again, let's start by looking at what the w3c has to say:
quote This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters. unquote
The class specification is a little more complex than the id specification, so let's break it down into three main points:
- 1. More than one class name can be assigned to a single element. (separated by white space characters)
- 2. A class name or combination of class names can be used more than once within the same document.
- 3. A class name or a combination of class names can be assigned to different elements.
The specification makes it instantly clear that the class attribute is much more versatile in its usage. It opens new doors but it's also easier to mess things up when used it badly.
Why use the class attribute
The main function of the class attribute is to identify one or more instances of the same element within a document or across related documents. The question to ask yourself is whether an element could be repeated more than once on the same page or on any other page within the same project. This should be a theoretical consideration which as much room as possible for flexibility. If this is the case, the class attribute should be used instead of the id attribute.
By doing this, you make it possible for javascript, css or other processes to retrieve a range of elements within one document and process them all together. For example, you can define a box for product descriptions, put multiple instances of this box on the same page and have them styled identically by one single piece of css. Adding or taking away such boxes has no further impact and requires no extra work.
Restrictions.
The same restrictions exist for the class attribute as they did for the id attribute. A little reminder (taken from w3schools again):
quote Not valid in base, head, html, meta, param, script, style, and title elements. unquote
Further specification of an element
Multiple class names can be assigned to a single element. You can use this in the sense that an element can be given a base class, then can be further specified by adding extra classes. While this sounds pretty logical, interpretation errors are looming. One thing to look out for is whether you are further specifying a certain element by itself, or whether you're trying to adapt an element according to its context. In the latter case, classes or ids higher up in the structure should be used in combination with the element class to target these elements.
There is no maximum amount of extra specifications listed. This means that you can add as much classes to one element as you want. Suffice to say, it's not really recommended to add 10 classes to one element, as the readability of your code will suffer. If this is the case, you probably need to restructure your elements or see to it that the context of the element is better defined. As a guiding rule, I try not to have more than 3 classes on one element, if possible only 1 base class and 1 class for extra specification.
As a little side note, the order of the specified classes on an element is not important. class="product promo" will be interpreted just the same as class="promo product". Still, when using extra classes to further specify an element, it is best to keep a logical ordering (base class first).
Applying unrelated classes to one element
Another option is to add two semantically unrelated classes to a single element. Doesn't sound too interesting, although it does have its uses. The most interesting one is to contain fixes (mostly used for css) and have them applied to elements through one class. The "clearfix" class is probably one of the most famous examples. The "hidden" class is another popular one.
A second way of using unrelated classes is to apply common behavior to a class. For example, you can contain recurring visual characteristics (1 pixel gray border with 0.5em padding) and have them applied to an element by simply adding the class. While often useful, it does go against the idea that classes should be used to identify elements, not to contain behavior and have that applied in a singular fashion.
It does get a little tricky when the common behavior holds a certain semantic value too. For example, it can be useful to use a base class to identify boxes that can expand and collapse, and further define variations of these boxes, or couple them with existing boxes. There's a gray area there that is left to the interpretation of the developer.
Using the same class on unrelated elements
I hope that by now you'll realize, just by reading the line above, that this is not preferred practice. While it is perfectly possible (and is not directly contradicted by the specification of the w3c) to do so, it will only confuse matters and might lead to unexpected results when code gets copied across pages (and changes context for example). Use classes to identify elements that can be repeated within a single document. Stick to it.
Rounding up
Like ids, classes should be used to structure your documents and add semantic meaning to elements where html falls short. Use classes to identify elements that could occur more than once on the same page and to further specify said elements. Try not to add too many classes on one single element and avoid classes that contain behavior instead of semantic meaning. Using the class and id attributes correctly gives you all the tools provide a solid, flexible and future proof structure to your documents.