Cascade layers

Layers are a new functionality in CSS that allows more control of the cascade and specificity of selectors. When using them, a 'stronger' layer will beat a stronger selector in a 'weaker' layer. [[20220801045127-css-specificity]] is only relevant inside a layer.

You can define as many layers as you want, such as a reset, base, theme, etc. This really helps you control how weak certain parts of your styling is, which is great for managing external libraries vs resets vs overrides etc.

As better explained in https://www.matuzo.at/blog/2023/cascade-layers-are-useless/, Cascade Layers allow you to better control the specificity through cascade layers, rather than specificity or hacks like !important. Adding a class like --error and styling that will work with our without layers, but crucially styling aria-invalid will usually not work as well.

Authors can create layers to represent element defaults, third-party libraries, themes, components, overrides, and other styling concerns—and are able to re-order the cascade of layers in an explicit way, without altering selectors or specificity within each layer, or relying on order of appearance to resolve conflicts across layers.

/* First layer */
@layer base-layer {
  body#foo {
    background: tan;
  }
}
/* Higher layer, so this wins, despite selector strength */
@layer theme-layer {
  body.foo {
    background: #eee;
  }
}

/* Careful! Unlayered styles are more powerful than layers, even if the selector is weaker */
body {
  background: red;
}

https://css-tricks.com/cascade-layers/ https://css-tricks.com/organizing-design-system-component-patterns-with-css-cascade-layers/ https://www.smashingmagazine.com/2025/06/css-cascade-layers-bem-utility-classes-specificity-control/

[[css]]