Why selecting by ID is not recommended in CSS? [closed]

Question

In CSS Lint, they don't recommend using an id for selecting elements. I trust CSS Lint because it written by smart people who know CSS very good and in depth. But I want to know what are reasons of this? Why is selecting with an id not a good thing?

Answer 1

I disagree with the idea of never using IDs for selecting elements, however I do understand the reasoning.

Oftentimes developers will use a very high specificity selector when the general form will suffice:

#foo #bar #baz .something a {     text-decoration: underline; } 

is probably better written as

.something a {      text-decoration: underline; } 

Additionally, writing styles like:

#foo-1, #foo-2, #foo-3, #foo-4 {     color: #F00; } 

are better written as:

.foo {     color: #F00; } 

Where I differ from CSSLint involves structural IDs that are reused.

I often mark up pages with this structure:

<div id="page">     <div id="page-inner">         <header id="header">             <div id="header-inner"></div>         </header>         <nav id="nav">             <div id="nav-inner"></div>         </nav>         <div id="wrapper">             <div id="wrapper-inner">                 <div id="content">                     <div id="content-inner">                         <article></article>                         ...                     </div>                 </div>                 <div id="sidebar">                     <div id="sidebar-inner">                         <div class="module"></div>                         ...                     </div>                 </div>             </div>         </div>         <footer id="footer">             <div id="footer-inner"></div>         </footer>     </div> </div> 

And because I know that structure is consistent, I don't mind using #page, #header, #nav, #wrapper, #content, #sidebar, and #footer in my css for sweeping region-specific styles. These styles are tightly coupled to this particular structure, which makes them less reusable; because I reuse the structure, they are reusable. The important thing to remember is that using an ID in a selector is very specific, and should be used sparingly.

---

A few words on specificity:

Generally speaking, one should use the lowest possible specificity selector that makes the correct selection:

If you're targeting all <a> elements, then it makes sense to use a.
If you're targeting all <a> elements within <div class="foo">, then it makes sense to use .foo a.
If you're targeting all <a> elements within <div id="bar">, then it makes sense to use #bar a. However, you could use a lower specificity selector. [id="bar"] a has the same specificity as .foo a, which means that you can still target specific elements by ID without creating selectors with unnecessarily high specificity.

I do not generally recommend using [id="XXXX"] selectors for selecting on the [id] attribute, because it's verbose and may cause confusion. I do recommend using [data-id="XXXX"] selectors for selecting based on custom [data-*] attributes to more closely relate styles to the current state of DOM nodes.

Answer 2

CSSLint gives a guide to why they make their recommendations:

IDs shouldn't be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It's much preferred to use classes in selectors and then apply a class to an element in the page. Additionally, IDs impact your specificity and can lead to specificity wars.

(From Disallow IDs in selectors.)

Basically, if you structure your code to use classes rather than IDs, your code can be more general and reusable, which is generally a good thing. Furthermore, specificity is a hard thing to get your head around, and can cause bugs that are hard to find, so if you omit ID selectors, you're less likely to have conflicting rules resolved in unexpected ways.