Warning: Avoid Excessively Long CSS Selectors

[nasty23-star]

Rule details

Overly long CSS selectors can negatively impact performance. Browsers evaluate selectors from right to left, meaning long chains require more processing. Deeply nested selectors (e.g., body div#container ul.nav li a) force the browser to check each level, slowing down rendering. While modern browsers optimize selector matching, unnecessary complexity still harms maintainability and scalability.

What type of rule is this?

Warns about a potential problem

Example code

/* Too specific and slow */  
body div#main-container section.blog article.post div.content p.text a.link {
margin-left: 20px;
}

Participation

• I am willing to submit a pull request to implement this rule.

Additional comments

No response

[nzakas]

Thanks for the suggestion. "excessively long" isn't specific enough for a rule, and everyone's idea of what a too-long or too-complex selector is different.

This is really a subset of what we were discussing on #19