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

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

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.