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.