Class Attribute

In case you need to target a range of identical elements and elements that occur several times on a single page, you should use the class attribute. According to w3c class attribute can be explained as following:

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.

In other words, we can highlight three main things concerning class attribute:

• It allows to assign more than one class name to a single element (separated by white space characters)
• You can use a class name or a combination of class names more than once within the same document
• You can assign a class name or a combination of class names to different elements

Thus, class attribute provides you with more opportunities than id attribute.

When Use the Class Attribute

First of all, decide whether an element will be repeated more than once on the same page or on any other page within the same project. If yes, you should use class attribute instead of id attribute. Thus, you make it possible for javascript and CSS as well as for other processes to retrieve elements within one document and process them all together. In such a way 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.

Note that there are the same restrictions for the class attribute as for the id attribute. Here they are:

Not valid in base, head, html, meta, param, script, style, and title elements.

You can assign multiple classes to a single element. In other words, an element can be given a base class, then can be further specified by adding extra classes. Seems to be quite simple, but still some errors occur. First of all, you should decide whether you are further specifying a certain element by itself, or just trying to adapt an element according to its context. In case you choose the latter, classes or ids higher up in the structure should be used in combination with the element class to target these elements.

You can add as much classes to one element as you need. However, it is not recommended to add 10 classes to one element because of code readability.

The order of the specified classes on an element is not important. Thus, class=”product promo” is the same as class=”promo product”.

Anyway, if you use extra classes to specify element, it is better to keep a logical ordering where base class comes first.

Apply Unrelated Class to One Element

You also can add two semantically unrelated classes to a single element or contain fixes and apply them to elements through one class. If you need examples, “clearfix” class and “hidden” class are the most popular.

The other way to use 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.

Apply the Same Class on Unrelated Elements

It is not advisable because such practice may lead to unexpected results when code gets copied across pages. Remember that it is better to use classes to identify elements that can be repeated within a single document.

Reference: www.onderhond.com/blog/work/class-attribute