Avoiding Specificity Wars
Prevent specificity conflicts with consistent selector strategies and low-specificity patterns.
What is a Specificity War?
A specificity war occurs when developers add more specific selectors to override other styles, triggering an escalating cycle of increasing specificity — often ending in liberal use of !important.
Root Cause: High Initial Specificity
The problem usually starts with one unnecessarily specific rule:
/* This forces every override to be at least ID-level */
#sidebar .nav-list li a { color: blue; }
/* Now to override color for active links: */
#sidebar .nav-list li a.active { color: royalblue; } /* escalating */