How do CSS cascade layers change which rules take precedence?

Think of the cascade as choosing a layer priority before comparing selector specificity. For normal declarations, later layers have higher priority than earlier layers. Normal declarations outside any layer outrank normal declarations in every layer. For !important declarations, the layer order flips: earlier layers outrank later ones, and layered important declarations outrank unlayered important declarations. [S1]

A compact diagram, assuming the layers are declared in this order:

Normal declarations (lower → higher): base → components → overrides → unlayered

!important declarations (lower → higher): unlayered → overrides → components → base

This describes layer priority when comparing declarations at the same relevant cascade origin. A rule in a higher-priority layer can win even if the competing rule has a more specific selector in a lower-priority layer.

Assume this stylesheet is the only relevant source of competing author rules:

@layer base, components, overrides;

@layer base {
  #panel.notice { color: darkred; }
}

@layer components {
  .notice { color: navy; }
}

.notice { color: seagreen; }

For a <div id="panel" class="notice">, the normal declaration outside a layer wins, so the text color is seagreen. It beats both layered declarations before specificity is compared. Among the two layered declarations, components outranks base; that layer ordering also takes priority over the fact that #panel.notice is more specific than .notice. [S1]

The initial @layer statement sets the order; the later blocks put rules into those named layers. This example is illustrative: other relevant declarations in the page could affect the result.

With !important, the layer priority reverses. For example, if the base and components color declarations above both became important, base would win over components, despite appearing earlier in the stylesheet’s layer-order declaration in the opposite direction for normal rules. If the unlayered .notice declaration also became important, the important declaration in a named layer would outrank that unlayered important declaration. [S1]

Moving a rule later in the file does not let it override a declaration from a higher-priority layer. Source order is a later tie-breaker: after the relevant cascade priority and specificity have been considered, order of appearance can decide a remaining tie. [S2] So first check whether the rules are layered and which layer has priority; only then use specificity and source order to investigate a conflict.

Use a short comparison rather than immediately increasing selector specificity:

1. Identify the two declarations that set the same property on the same element.
2. Check whether either declaration is !important.
3. For normal declarations, compare layer priority: later layer first, then unlayered rules above layered rules. For important declarations, reverse the layer order; layered important rules outrank unlayered important rules. [S1]
4. If the declarations remain at the same relevant layer priority, compare specificity; if that also ties, check source order. [S2]
5. Change the layer assignment or the intended declaration, then recheck the result.

A useful note to leave beside a bug is: “Property: [property]. Competing selectors: [selector A] and [selector B]. Layer/order: [layer A] vs [layer B]. Importance: [normal or !important]. Expected winner: [rule].” This records the reason for the fix rather than just preserving another override. The comparison here does not account for every possible cascade factor, such as declarations from different origins; use it for the layer, specificity, and source-order conflict you are investigating.