Glossary · Beginner
CSS cascade
The CSS cascade is the ordered process browsers use to choose a winning declaration when several rules assign the same property.
- Published
- Last checked
Definition
The CSS cascade chooses one declared value for each property on each element when several declarations compete. It considers relevance, origin and importance, cascade layers, specificity, scoping proximity where applicable, and source order. Specificity is only one stage, not the whole algorithm.
Practical order
User-agent, user, and author styles have defined origins. Important declarations change the origin order. Within an origin, later cascade layers have controlled precedence for normal author rules. Only declarations still tied after those steps compare specificity and then order of appearance.
Why it matters
Most “CSS did nothing” bugs are cascade questions. Adding a longer selector or
!important may win today while making the next correction harder. Inspect the
competing declarations, identify the stage that decided the winner, and change
the ownership or layer rather than escalating blindly.
Review question
Can you explain why the winning declaration wins without referring only to how long its selector looks? In browser tools, inspect inactive rules, origin, importance, layer, specificity, and order. Then remove accidental overrides and confirm component, theme, responsive, and user-preference rules still resolve predictably.
Record the winning selector and the reason it wins before editing. Then test the same property in normal, hovered, focused, disabled, and narrow-layout states. This prevents a local correction from silently breaking another branch of the cascade that shares the component.