Home >CSS >CSS reference – properties, selectors, functions >@layer

@layer

@layer name { … } @layer a, b, c;

Cascade layers group rules and set their priority by the order of the layers: a rule from a later layer wins over a rule from an earlier one, even when it has a lower specificity. Specificity decides only within one layer. Typically: reset → libraries → components → exceptions.

Values

@layer a, b, c; – sets the order of the layers in advance (the priority grows to the right).
@layer a { … } – rules into a layer; the first occurrence of the name sets its place in the order.
@layer { … } – an anonymous layer (nothing can be added to it later).
@layer a.b – a nested layer b in the layer a.
styles outside layers take precedence over all layers.

Examples

A rule from the components layer wins over a rule with an ID from the base layer, because the layer comes later in the order:

<form id="form">
  <button class="button">Send</button>
</form>

@layer base, components;
@layer components {
  .button {
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: #0088d1;
    color: #fff;
  }
}
@layer base {
  #form button {
    background: #ccc;
    color: #222;
  }
}

result

Things to watch out for

Styles outside layers win over all layers – even third-party CSS without layers (older libraries, plugins) overrides your layered styles. A third-party file can be put into a layer with @import url(…) layer(library).
For !important the order is reversed: !important from an earlier layer wins, and from any layer it wins over !important outside layers.
The order of layers is set by the first occurrence of the name. A line @layer a, b, c; at the start of the main style sheet prevents an unexpected order.
Support: Chrome since 99, Firefox since 97, Safari since 15.4. An older browser drops the whole layer block.

Browser support

Baseline – widely available: in all major browsers since March 2022, considered widely available since September 2024. Since version: Chrome 99, Firefox 97, Safari 15.4. As of October 2026 (MDN browser-compat-data).