Cascade layers (@layer)

Baseline 2022 (Chrome 99, Safari 15.4, Firefox 97); widely available.

Chrome 99Edge 99Safari 15.4Firefox 97

Declares ordered layers so later layers always win over earlier ones regardless of specificity. It ends specificity wars between resets, third-party CSS and components: a single-class override beats an `#id` selector in a lower layer.

CSS

@layer reset, vendor, components, overrides;
@layer vendor {
   #cta {
    background: #c0392b;
    color: #fff;
    border: 0;
    padding: 10px 18px
  }
}
@layer components {
   .fx-004 {
    background: #2563eb;
    border-radius: 8px;
    font: 600 15px system-ui
  }
}
@layer overrides {
   .fx-004 {
    background: #111
  }
}
.fx-004 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<button class="fx-004" id="cta">Layered button</button>

Fallback: None needed in practice; all evergreen browsers support layers. Unlayered styles win over all layers, so keep everything in layers.

Source: developer.mozilla.org/en-US/docs/Web/CSS/@layer

Prompt

Organise the CSS into cascade layers declared once at the top: `@layer reset, base, components, utilities, overrides;`. Put third-party or generated CSS in a low layer (`@layer vendor`), components above it, and utilities last so they win without `!important`. Never leave rules unlayered except the `@layer` order statement itself.