Cascade layers (@layer)

Baseline 2022 (Chrome 99, Safari 15.4, Firefox 97); breit verfügbar.

Chrome 99Edge 99Safari 15.4Firefox 97

Deklariert geordnete Layer, sodass spätere Layer unabhängig von der Spezifität immer über frühere gewinnen. Beendet Spezifitätskriege zwischen Resets, Drittanbieter-CSS und Komponenten: ein Einzelklassen-Override schlägt einen `#id`-Selektor in einem niedrigeren 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: In der Praxis keiner nötig; alle Evergreen-Browser unterstützen Layer. Ungelayerte Styles gewinnen über alle Layer, also halte alles in Layern.

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

Prompt

Organisiere das CSS in Cascade Layers, einmal oben deklariert: `@layer reset, base, components, utilities, overrides;`. Lege Drittanbieter- oder generiertes CSS in einen niedrigen Layer (`@layer vendor`), Komponenten darüber und Utilities zuletzt, damit sie ohne `!important` gewinnen. Lass nie Regeln ungelayert, außer die `@layer`-Reihenfolgeanweisung selbst.