The Cascade: Origin and Order

The cascade is the algorithm CSS uses to determine which style declaration wins when multiple rules target the same property on the same element. It considers origin, importance, specificity, and source order.

CSS declarations come from three origins, in priority order:

1. User-agent stylesheet — browser defaults
2. User stylesheet — custom styles set by users (accessibility)
3. Author stylesheet — your CSS files

Under normal (non-important) declarations, author styles override user styles, which override user-agent styles. This is why your CSS beats browser defaults.

Adding !important reverses the origin order for that declaration:

1. User-agent !important
2. User !important — highest priority (accessibility)
3. Author !important

This is why user accessibility overrides (e.g., forced colors) cannot be defeated by author CSS.

When two declarations from the same origin compete, specificity determines the winner. Higher specificity wins — this is what developers think of first when debugging CSS.

When two rules have identical specificity, the one that appears later in the stylesheet wins. This is the "source order" rule. It is why the order of your @import statements and @keyframe declarations matters.

CSS cascade layers (@layer) introduce a new cascade step between origin and specificity. Layer order determines priority, and a declaration in a later layer wins over one in an earlier layer regardless of their specificity.

Complete priority order (highest to lowest):

1. Origin + importance (!important user, !important author)
2. Animation values
3. CSS Layers (later layers win)
4. Specificity
5. Source order
6. Transition values

Inheritance is different from the cascade. Inherited values come from the computed style of the parent element. They lose to any directly applied value, even from a low-specificity rule.

Place more specific (variant) styles after base styles in your stylesheet. This is why component files should be imported after reset and base files.

In DevTools Styles panel, rules are listed from highest to lowest priority. Crossed-out rules lost the cascade. Hover over a rule to see its source file and line number for debugging.

Two rules target the same property with identical specificity. Which one wins?

The cascade resolves style conflicts using origin (author > user > browser), then importance (!important reverses order), then @layer order, then specificity, then source order. Understanding the cascade means you can predict exactly which rule wins any conflict — no more guessing.