CSS Cascade Fundamentals

The cascade determines which CSS rules apply when multiple rules target the same element. Understanding cascade prevents specificity wars and unpredictable styling.

Cascade Order (highest to lowest priority):

1. Origin & Importance: User agent → user → author (with !important reversing order)
2. Inline Styles: style="" attribute
3. Specificity: IDs > Classes > Elements
4. Source Order: Later rules override earlier ones

Specificity Calculation:

• Inline styles: 1,0,0,0
• IDs: 0,1,0,0
• Classes/attributes/pseudo-classes: 0,0,1,0
• Elements/pseudo-elements: 0,0,0,1

First Principle: CSS isn’t broken when styles don’t apply - the cascade is working as designed.

Mental Model: Think of cascade like water flowing downhill - it follows predictable rules, not random behavior.

Best Practice: Keep specificity low and consistent. Use classes, avoid IDs for styling.

Related: CSS Custom Properties, Progressive Enhancement