What are the reasons to use the id attribute for CSS purposes?

Question

I've always used the class attribute, never id for the purpose of CSS selecting and styling. I know that the id must be unique, but that doesn't seem to be a reason to use it for CSS.

The only reason I have used the id attribute is for JavaScript and form labelling.

I find mixing id and class for the purpose of CSS can cause confusion, and for me it's a good way to force separation of style and behaviour.

Is there a good reason to use id for CSS purposes? Is there anything that can be achieved with id that can't be done with class?

Comments I found useful/interesting

• You could say the same thing about classes. There's lots of JavaScript out there that does (and must) target elements of a specific class. Changing the class in those instances is just as problematic from a behavior standpoint. - AaronSieb
• IDs have different specificity in the cascade than classes. - Killroy
• Using ID for styling makes sense if it's an element that doesn't have duplicate, especially if it's something that shows up in all/most pages - RichN

Answer 1

If you have multiple elements of the same class and need to specify a different style for one or more of them that'd seem pretty valid to me.

Answer 2

No, but if your element has an id why not use it for styling?

You could say the same thing about element names - there's nothing you can do with p that you couldn't do with class='paragraph'. That doesn't mean it's a good idea to add class='paragraph' to every <p> element.

Answer 3

IMO, using ID-based styles is a bad idea.

IDs, being unique, should only occur up-to 1 time within your DOM. This limits the use of any ID-related style to up-to 1 time.

CSS classes, on the other hand, can be used multiple times or not at all.

Frankly, I think ID should be used for behavior, and class should be used for style. The fact that you can use them interchangeably is part of what makes some aspects of web development inconsistent.

Answer 4

Selecting anything with a unique id is faster than selecting with a class. The difference is negligible, but in applications with huge amounts of DOM elements, or intensive Javascript application, it makes a difference.

For example if you are using jQuery check this out: jquery performance rules

Answer 5

Using ID for styling makes sense if it's an element that doesn't have duplicate, especially if it's something that shows up in all/most pages.

E.g.:

• Page header & footer
• Search box (the thing you can see up there)
• Navigation list (something like the thing on the right)

Answer 6

You don't HAVE to use IDs. There is no design that you can create using IDs that you can't create using classes.

With that said, using an ID has the advantage of clearly labeling a selector as applying to exactly one element in a page. I typically use them for styling elements in my page templates (#Content, #Navigation, etc.).

In general, I would try to use it in areas that allow me to make the markup more concise. When a selector can be targeted at a tag, you should use the tag. When it can be targeted at an ID, use the ID. Otherwise, use a class.

But, again, whether or not you use IDs isn't terribly important.

Answer 7

I use a id when i know im going to use javascript on that specific element. ID's are much faster then classes in javascript.

Answer 8

I tend to think of the relationship of id and class in HTML as analogous to object-oriented programming: an id is like an instance of a class.

I use classes more than I use ids, and often use multi-class selectors (e.g. .film.drama). But if I do want to identify a particular element, so that I can apply specific styling or behaviour, then I'll assign an id, and often a class as well. E.g.

<ul>
    <li class="film drama">A</li>
    <li class="book drama">B</li>
    <li class="film documentary" id="film-9832">C</li>
</ul>

In assigning an id, I think "could it ever make sense for there to be more than one of these on the page". If the answer is yes, then I'd probably go for a class instead.

As a result, and as @RichN and @AaronSieb have mentioned, I often use id's for specific page elements that are certain to be present only once on the page:

<ul class="sidebar" id="site-meta">[...]</ul>

Answer 9

IDs identify, classes classify. This point has been mentioned several times here, more or less.

An example would be:

<div class="author" id="stephen">[...]</div>

From a CSS specificity standpoint, targeting IDs will make CSS rules more specific than rules with classes, even several classes.

Thus:

p#recent {}

is more specific than

body>p.news.recent {}

and when a user agent finds both of these, the first will prevail.

Answer 10

The only thing I can think of to use an ID is if you have a specificity war - two elements with the same specificity. Applying an ID will give your element a higher specificity - +100 to be exact.

So, in the case where you have two styles defined with equal specificity, you may want to 'clobber' one by applying a higher specificity to the other. That being said, you can achieve the same by applying a more specific class to that selector too, which would increase the specificity by 10.

ID = 100 (#foo) class = 10 (.bar) element = 1 (div)

Answer 11

The main reason I use ID tags is to communicate with people who are reading my code. Specifically, the ID tag makes it easy to reference whatever specific element they want to with complete peace of mind, knowing that any changes they make to it will only affect that one element.

EDIT: There is also a more technical reason to use ID tags that you may not know. I just saw it explained in another question on SO by a user named Bart who pointed to this article. To quote Bart:

This is a pretty good article that can help to clear up the root cause of some CSS conflicts. The formula that this site talks about really opened my eyes when I first discovered it (the formula, not the article).

Basically, you add up a "score" for each rule in your CSS. The rule with the highest score wins and gets to style the element.

• Each ID is worth 100
• Each CLASS is worth 10
• Each ELEMENT is worth 1

html body{font-size: 80%;} /* worth 2 */
body{font-size: 70%;} /* worth 1 */
body#body-id{font-size: 50%;} /* worth 101 */
body.body-class{font-size: 90%;} /* worth 11 */
#body-id{font-size: 60%;} /* worth 100 */

The font-size of the body would be 50%.

When I read this, I couldn't believe that I had never heard of these rules, as they could potentially change a site's look and layout significantly. Knowing of them now makes the cascading nature of CSS much more apparent.

Answer 12

I personally prefer to use ID's for static page elements (headers, footers). Reason being page weight.

id="h" is lighter than class="h".

Every byte counts in my opinion.

Answer 13

The main reason why I use ids in CSS is for layout. If I have one header and footer, then:

#header
{
...
...
...
}

#footer
{
...
...
...
}

Or one wrapper for my main content, or one right sidebar. If someone decides they like my layout and want to view source, it's easy to see.