[CSS] Why is ID selector not recommended in CSS?

Recently, I was conducting some performance tests on CSS styles. Some of my friends asked me: Why don't you use IDS as some specific content on the page?

It is difficult to answer this question for the following reasons:

1. This element on the page cannot be reused.
2. Specificity caused by spiral descent
3. IDS is used to identify some very special content, but it sacrifices abstraction.
4. Performance can be solved in other ways

We will discuss these four points in depth.

Page elements cannot be reused

IDS pairProgramThis is equivalent to a singleton. Two identical IDs are not allowed in a page (of course, the browser will not report an error), which means that you cannot reuse an element, it is equivalent to a one-to-one relationship. Based on my speed test, if a piece of CSSCodeIt only works for one element, which is not conducive to the speed, but also brings the extra overhead of CSS expansion.

Translator: the translation below is a bit confusing. If you cannot understand it, read the original English text.

Specificity caused by a spiral descent

Two Methods of CSS overloading:

1. Cascade: (any element at the next level can override the CSS rules at the previous level)
2. Specific: the idea of creating weight by using weighted selectors.

Why do I say this is a spiral descent, because to reload a rule with a high priority, I have to set a higher priority for it.

 

 
. Moduleofficelist. Property-checkbox input {display: block; margin-bottom: 8px; _ border: 0px! Important ;}. moduleofficelist. property-checkbox ,. moduleofficelist. new-icon ,. moduleofficelist. open-Icon {display: block }.... UID-officelistings. property-checkbox {display: none! Important ;}
 

 

The above is a piece of my real code in 2005. The above code must be used at the end! The impant ant rule to re-sort the selector rules. This is not good. Once we do this... it takes us more time to hunt down the parent ID, and we will overwrite the current specificity. This is unfriendly and not conducive to maintenance. In the end, you will drop into your own holes, and only reconstruction can get rid of this nightmare.

On the other hand:

I heard a few voices about using the ID selector.

Faster with ID Selector

Yes, this is true, and I have proved it. However, the performance is minimal, but the performance degrades when you use nested other selectors:

 

 
# Profile-module {...} # profile-module Li {...}. Profile-module Li {...}
 

 

The second selector is not as fast as the third one, because CSS is from right to left, Li will be scanned first, so positioning by ID will be ignored directly.

For details about the CSS selector performance, see Steve Souders explains how selector Speed works.

IDs indicates a singleton.

Many people define IDs on the page, but if an element appears only once on all pages, it is okay to use the ID selector. The only thing I declare is that all code should be reusable and should be avoided if possible.

Note

Finally, it should be noted that I don't want everyone to discard ID completely. ID can accelerate JavaScript Execution and convey the specific meaning in the document.

I just don't recommend using the ID selector in CSS. Of course, it is up to you.