Cascade layers: @layer

In the cascade lesson, the rule with the stronger selector won. In a large project this turns into a fight: the reset, library styles and your own components override each other, and selectors have to get heavier and heavier. Cascade layers (@layer) let you agree in advance which group of styles is more important — regardless of specificity.

The first layer

Rules are wrapped in an @layer name block. Between layers, the one declared later wins, even if its selector is weaker:

<style>
  @layer base {
    #menu a { color: gray; }
  }
  @layer components {
    .active { color: crimson; }
  }
</style>
 
<nav id="menu"><a href="#" class="active">The active link</a></nav>

The #menu a selector is much stronger than a class, but the components layer comes later — the link is red. Specificity is compared only within one layer.

The order of layers

The order is handy to set in one line at the top of the file: @layer with a comma-separated list of names. After that, the layer blocks can be written in any order — only this list matters:

<style>
  @layer base, components;
 
  @layer components {
    .btn { background: seagreen; }
  }
  @layer base {
    button { padding: 8px 16px; border: none; background: gray; color: white; }
  }
</style>
 
<button class="btn">A green button</button>

The base layer is written lower, but it is first in the list, so it loses.

Unlayered styles

Rules that are not in any layer are stronger than all layers. This way old code without layers keeps working, and quick fixes can be written without @layer:

<style>
  @layer components {
    .note { padding: 8px; background: lightskyblue; }
  }
  p { background: gold; }
</style>
 
<p class="note">The background is yellow: the unlayered rule beat the class</p>

A typical set of layers

This order is common — from general to specific, like the sections of a stylesheet from the previous lesson:

@layer reset, base, components, utilities;

Files and libraries in a layer

A whole file is put into a layer when it is included with @import. This is especially useful for third-party libraries: their styles land in an early layer, and any of your own rules overrides them without !important:

@import url("library.css") layer(library);
 
@layer library, components;

The @import rule is written at the very beginning of the stylesheet.

Common mistake

The list of layers at the end of the file. The order of layers is fixed when each name is first mentioned, so a late list no longer changes anything:

<style>
  @layer components {
    .btn { background: seagreen; }
  }
  @layer base {
    button { padding: 8px 16px; border: none; background: gray; color: white; }
  }
  @layer base, components;
</style>
 
<button class="btn">We wanted green</button>

The components layer was mentioned first and base second, so the gray background won. Write the line with the layer order at the very top.