Unlayered CSS Beats Layered CSS

A CSS Cascade Layers rule that catches teams off guard: unlayered styles beat any layered styles, regardless of layer order. Declaring @layer overrides last does not make it win against a third-party library that injects unlayered global styles (Angular Material, PrimeNG, AG Grid all do).

Cascade priority, lowest → highest:

1. Layered styles, in declared order (reset → … → overrides)
2. Unlayered styles                         ← beats all of 1
3. Layered !important, in REVERSE order     ← (overrides → … → reset)
4. Unlayered !important                     ← beats all of 3

So to beat unlayered third-party CSS from inside @layer overrides, you must either write the override unlayered too, or use !important (which jumps to tier 3, above unlayered non-important).

The trap: layers feel like "later layer always wins", but that intuition only holds within the layered set. The unlayered tier sits above the entire ordered stack. Knowing this turns "my override mysteriously doesn't apply" into a one-line diagnosis.

Source: css-conventions skill §12 (unlayered-styles footgun).