Class vs. ID

Style hooks are the bindings between the HTML markup and the styles that get applied to them. These hooks are most commonly established by assigning values to the ID or CLASS attributes of the HTML elements to style, but when should ID be used, and when should we use class? Here are some thoughts on this very topic.

The key thing to know is that IDs identify a specific element and therefore must be unique in the document – you can only use a specific ID once per document. Many browsers do not enforce this rule, but it is a basic rule of XML, HTML and XHTML and it should always be observed.

The choice between ID and class can also be important from a selector specificity point of view, as IDs have higher specificity than classes. This means that, in situations where a class’s properties might not be applied (for reasons of specificity and inheritance), an ID’s properties probably will be—IDs trump virtually everything, so you can be fairly sure that they’ll make their mark.

When to use classes:

Classes are useful to apply similar declarations to a variety of elements, or to have a thematic style applied consistently. Classes are used to define classifications (or really, groups) of markup that share common styling. For example, you may wish for all external links to be red, while internal links are blue. Using the class attribute in this case makes sense.

Classes should be used to mark elements as members of a style group and applied to more than one element. So if you want to define a style which will be applied to multiple elements you should use a class.

An element can have multiple class values (by space-separating the values). In this way, a single element can “belong” to multiple classes.This raises an interesting point that is worth discussing. What’s the expected behavior when an element has multiple classes that redefine the same rule? Which wins? Here’s an example:

1. .foo
2. {
3. border: 1px;
4. }
5.  
6. .bar
7. {
8. border: 2px;
9. }
10.  
11. .foobar
12. {
13. border: 3px;
14. }
15. Download this code: /code/class_vs_id_01.css

1. <h1 class="foo bar foobar">
2. Test
3. </h1>
4. Download this code: /code/class_vs_id_01.html

In this case, the rendered border would be 3px. However, so would this one:

1. <h1 class="foobar bar foo">
2. Test
3. </h1>
4. Download this code: /code/class_vs_id_02.html

This is because it’s the order of the rules in the style sheet that controls precedence; the order of the class names in the class attribute is irrelevant.

Classes should be used sparingly, instead relying on ID and the cascade to simplify the markup and readability.

Once again, design your markup around what the object you’re representing is, not how you want it to look. This decreases page weight and simplifies dependencies. For example, let’s say we want table headings on detail pages to look different from table headings on summary pages. Don’t create two different classes for two different headings in the markup. Identify the tables, and style the headings contextually:

1. table#detail thead
2. {
3. background-color: red;
4. }
5.  
6. table#summary thead
7. {
8. background-color: green;
9. }
10. Download this code: /code/class_vs_id_02.css

When to use ID’s

IDs are useful to uniquely identify a particular element. They are required to be distinct within document in HTML just as they are in XML. Additionally, unlike classes, an element can only have one ID value.

From a CSS selector perspective, ID’s have more specificity than classes—rules that are applied to the ID of the element will generally override rules applied to the element’s classes.

Using ID is a good choice when you want to apply rules to elements which are contained by a specifically identified element that is distinct within the page.

• For example, you may wish to have all menu links be green, while content links are red. Placing the menu inside an element which has an ID of “menu” or “content” respectively allows you to make contextual styling based on the section of the page.
• Additionally, it’s a good practice to apply positional styling to elements via ID hooks, which makes sense when you consider that the nature of positioning is that it usually applies to a single element (ID) rather than a group of elements (class).
• When considering page layout, use an ID for each part of the page: navigation (#navigation), main text (#body), footer (#footer) and so forth.

When to use both class and ID together

It’s sometimes useful to use both id and class. For example, consider a page with a header and footer that you want to look consistent in terms of color, font, etc. that can be hooked through a class=”primarynav”, for example. But they have position settings too, which can be hooked through id=”header” and id=”footer”.

Next post (newer)

XHTML and CSS validation? Why bother?

Previous post (older)

Choosing values for XHTML class and ID attributes