Language 8 of 10 · Topic 0.6

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.