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

As it currently stands, this question is not 开发者_如何学编程a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 10 years ago.

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

---

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)

---

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

---

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.

---

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.

---

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.

There is also a more technical reason to use ID tags that you may not know. This information can be quite enlightening for those who are new to CSS.

The following outline illustrates exactly how the "cascading" nature of Cascading Style Sheets works. In this outline, start by comparing 2 CSS styles based on the uppermost criteria of the outline, ie "1. Winner = !important declaration." If one style is of higher priority than the other in that aspect, it wins. If they are the same in that aspect, continue down to the next criteria in until you find the differentiating factor.

1. Winner = !important declaration.
   • Eg. #some-element {color: blue !important;} beats #some-element {color: red;}.
2. Winner = Inline CSS.
   • Eg.:
     • <div id="some-element" style="color: yellow;}">some content</div>beats...
     • <style type="text/css">#some-element {color: red;}</style> and...
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>.
3. Winner = Greatest # of ID selectors.
   • Eg. #some-element#id-2 {color: blue;} beats #some-element {color: red;}.
4. Winner = Greatest # of class, pseudo-class, and other attribute selectors.
   • Eg. .some-elements.class-2 {color: blue;} beats .some-elements {color: red;}.
5. Winner = Greatest # of element names and pseudo-elements in the selector.
   • Eg. #some-element:hover {color: blue;} beats #some-element {color: red;}.
6. Winner = Most recently read by the machine.
   • Eg.:
     • <style type="text/css">#some-element {color: red;}</style> beats...
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/> because internal CSS is read after external CSS.

---

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.

---

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>

---

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.

---

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)

---

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.

---

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.

---

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.

---

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.