Specificity determines which CSS rules apply when multiple rules target the same element. Master it to write predictable, maintainable styles.
Specificity Calculation#
Loading code block...
Selector Weights#
Loading code block...
Comparing Specificity#
Loading code block...
:is(), :where(), and :not()#
Loading code block...
:has() Specificity#
Loading code block...
Inline Styles and !important#
Loading code block...
Common Specificity Problems#
Loading code block...
Specificity Strategies#
Loading code block...
Cascade Layers#
Loading code block...
Debugging Specificity#
Loading code block...
Reducing Specificity#
Loading code block...
Architecture Patterns#
Loading code block...
Best Practices#
Writing Selectors:
✓ Use single classes
✓ Avoid ID selectors
✓ Keep nesting shallow
✓ Prefer BEM or similar
Managing Specificity:
✓ Use cascade layers
✓ Use :where() for defaults
✓ Keep specificity flat
✓ Document exceptions
Avoiding Problems:
✓ Never use !important (except utilities)
✓ Don't over-qualify selectors
✓ Avoid inline styles
✓ Be consistent with methodology
Debugging:
✓ Use DevTools
✓ Check crossed-out styles
✓ Calculate specificity
✓ Test overrides
Quick Reference#
Specificity (Inline, ID, Class, Type):
Universal (*) 0,0,0,0
Type (div) 0,0,0,1
Pseudo-element (::) 0,0,0,1
Class (.class) 0,0,1,0
Attribute ([attr]) 0,0,1,0
Pseudo-class (:hover) 0,0,1,0
ID (#id) 0,1,0,0
Inline style 1,0,0,0
!important Beats all*
Special:
:where() 0,0,0,0 (zero)
:is() Uses highest inside
:not() Uses argument
:has() Uses argument
Conclusion#
Specificity determines which CSS rules apply when selectors conflict. Keep specificity low and flat using single-class selectors and methodologies like BEM. Use :where() for base styles that should be easily overridable, and leverage cascade layers for architectural control. Avoid ID selectors, deep nesting, and !important to maintain predictable, maintainable stylesheets.