Stile zu Layern hinzufügen

Sie können Stile inline (innerhalb eines @layer-Blocks) oder über @import hinzufügen (um ein importiertes Stylesheet einer Ebene zuzuweisen).

Schließen Sie Regeln innerhalb eines @layer-Blocks mit dem Namen der Ebene ein:

Sie können in mehreren separaten @layer-Blöcken zu einer Ebene hinzufügen. Alle Deklarationen werden in der Ebene zusammengeführt:

Ein @layer-Block ohne Namen erstellt eine anonyme Ebene. Anonyme Ebenen können später nicht erweitert werden und befinden sich an der Stelle, an der sie erscheinen:

Weisen Sie ein vollständiges importiertes Stylesheet einer Ebene zu:

In einem modularen Projekt fügt jede Komponentendatei der Ebene components hinzu:

Sowohl Sass als auch PostCSS funktionieren zusammen mit @layer. Sie können Ebenen in Ihrer zentralen Einstiegsdatei definieren und mit @use oder @import Komponenten-Teildateien einbinden, die zu diesen Ebenen beitragen.

Inline-Stile (Attribut style="") werden von Ebenen nicht beeinflusst — sie setzen sich immer gegenüber den Stilen jeder Ebene durch. Nur Stylesheet-Regeln (einschließlich <style>-Blöcken) können in Ebenen platziert werden.

Chrome DevTools zeigt im Styles-Panel die Grenzen von Ebenen an. Regeln aus einer Ebene mit niedrigerer Priorität, die von einer höheren Ebene überschrieben werden, erscheinen durchgestrichen; dabei wird die siegreiche Ebene angegeben.

Browser, die @layer nicht unterstützen, behandeln alle @layer-Blöcke als gewöhnliche CSS-Blöcke (sie rendern alles). Das Kaskadenverhalten unterscheidet sich, aber Stile gehen nicht verloren. Wickeln Sie funktionsabhängigen Code zur Sicherheit in @supports (@layer selector) ein.

Strategie für die Umstellung:

1. Deklarieren Sie Ebenen am Anfang Ihrer zentralen CSS-Datei
2. Schließen Sie jeden vorhandenen CSS-Abschnitt in den entsprechenden Ebenenblock ein
3. Testen und beheben Sie alle auftretenden Prioritätsprobleme
4. Entfernen Sie nach und nach unnötige Selektoren mit hoher Spezifität

Wie fügen Sie Stile aus mehreren separaten @layer-Blöcken derselben benannten Ebene hinzu?

Fügen Sie Stile mithilfe benannter @layer name { }-Blöcke zu Ebenen hinzu — diese können auf mehrere Dateien verteilt werden und werden alle zusammengeführt. Weisen Sie importierte Stylesheets mit @import layer() Ebenen zu. Anonyme Ebenen können nicht erneut geöffnet werden. Inline-Stile überschreiben immer in Ebenen deklarierte Stile.