Using CSS selector specifity over selector ID's?

Question

In class we are teached to avoid creating ID's in your HTML so you can use them to identify that element in your CSS file. Instead we must use selector specifity as much as possible.

Take for example this simple HTML:

<body>
  <div>
     <div>
       <div>
          The div you want to style.
       </div>
     </div>
  </div>
</body>

Is it better to use this:

body > div > div > div{
     color: blue;
}

or give the element an id (let's take 'middle') and use this:

#middle{
     color: blue;
}

What are the differences (if any at all) performance and usability wise?

CSS: classes most of the time (not all). IDs are still necessary on form elements to associate them to their labels (having a for attribute with the same value), in JS, etc — FelipeAls, Apr 20 '13 at 10:59
The question refers to some teaching without mentioning the arguments given, and it asks an abstract question about preference presumably based on the wrong teaching. — Jukka K. Korpela, Apr 20 '13 at 11:11

score 2 · Accepted Answer · edited May 23 '17 at 12:28

The difference in speed between IDs and Classes in modern browsers is so negligible in real world situations it is really not an issue. Therefore current main-line thinking is to use classes where extra clarity and specifity is needed. This way you avoid specifity wars and balances maintainability with code purity.

<body>
  <div>
     <div class="more-specific-if-needed">
       <div class="middle">
          The div you want to style.
       </div>
     </div>
  </div>
</body>

.make-more-specific-if-needed .middle {
    /* cool styles */
}

Or even use chained selectors to gain extra specifity. You could then split styles in to separate structure based build styles and appearance based theme styles.

<body>
  <div>
     <div>
       <div class="semantic-role theme">
          The div you want to style.
       </div>
     </div>
  </div>
</body>

.semantic-role.theme {
    /* cool styles */
}

For further reading:

score 1 · Answer 2 · answered Apr 20 '13 at 08:35

Performance wise it's fastest to get an element by its id than it is to traverse the dom.

From a usability point of view I would be careful using too many id's since they can be only used once for an element.

So it's a question of what you think is more important and how many items we are talking about. Is the speed gain worth the losing of re-usability

score 1 · Answer 3 · answered Apr 20 '13 at 08:39

Much better to use ID. Performance difference is minimal, and not the important point. I think code readability / maintainability is more important.

One advantage of using ID, is that you could move your element to a different part of the page, and it would retain it's style rules - without counting the containing elements.

Using CSS selector specifity over selector ID's?

3 Answers3