CSS Specificity Hierarchy & Cascading Order
1Concept
Specificity determines which CSS rules apply: Inline style (1,0,0,0) > ID (0,1,0,0) > Class/Attribute/Pseudo-class (0,0,1,0) > Element (0,0,0,1). CSS Cascade Layers (@layer) allow organizing rule priority.
2Architecture Diagram
Specificity: Inline (1000) > #id (100) > .class (10) > element (1)
3Code Example
Stage 0 Language Foundations
/* Specificity: (0, 0, 1, 0) */
.btn-primary {
background: #6366f1;
color: #ffffff;
}
/* Specificity: (0, 0, 2, 0) - Takes precedence */
.navbar .btn-primary {
background: #4f46e5;
}4Expected Output
[Button inside navbar renders with #4f46e5 background]
5Key Takeaways
- ✓Avoid using !important; structure specificity cleanly.
- ✓Use BEM naming methodology or CSS Modules to avoid specificity wars.
- ✓CSS Cascade Layers (@layer) control overriding precedence.