When To Use And Not to Use a Class

When to Use a Class
As described previously, classes are a very flexible method for applying your CSS rules, and can
be used again and again within a page. Use classes to control elements that belong to a group,
for temporary items, and also to enhance the behavior of an ID.

When Not to Use a Class
It is not recommended that classes be used for main structural elements within a page, such as
headers and main navigation, although they will work. Doing so would decrease the flexibility
of your design and make further customization difficult without overhaul or extra markup.
Also, be sure a class is needed, and make sure the element cannot be targeted by defining a rule
for the existing (X)HTML before getting class-happy. Remember that a class is used for exceptions
to normal styling, and not to define the standard.

When to Use and Avoid an ID

When to Use an ID
 
Only one element on each page can be styled by each unique ID, and therefore IDs should be
reserved for unique, single-use elements such as a header or sidebar, or the main navigation or
page footer. This makes scanning your markup easier, as all ID attributes will denote unique
content areas or special regions of the page, while also providing greater flexibility for more
complex CSS application. Later in this chapter, further uses for IDs will be discussed in the
“Contextual Selectors” selection.

When to Avoid an ID
IDs must be avoided when there is more than one requirement for the CSS rule. Do not use an
ID for anything you are likely to multiply in the future, such as multiple images, link styles, or
paragraphs where more than one will need to be styled a particular way.