CSS Cascade Layers

The specificity problem

As stylesheets grow, authors pile on selectors and important to win conflicts. Override order becomes unpredictable and brittle.

What layers do

Cascade layers, declared with at layer, create named buckets whose order you control explicitly. The cascade compares layers before it compares specificity.

• Styles in a later layer beat styles in an earlier layer, regardless of selector specificity.
• You declare the order once, then fill layers in any order.
• Unlayered styles count as a final implicit layer that wins over all named layers.

A typical order

at layer reset, base, components, utilities

A simple class in utilities can override a complex selector in base because the layer wins first. This lets a low specificity utility reliably override library defaults placed in an earlier layer.

Key idea

Cascade layers order styles by layer first, specificity second, so you control overrides by structure instead of selector arms races.