@layer-Deklaration und Reihenfolge

CSS-Kaskadenebenen (@layer) bieten einen Mechanismus, um die Priorität von CSS-Regeln in der Kaskade ausdrücklich zu steuern — unabhängig von der Spezifität. Ebenen mit niedrigerer Priorität verlieren selbst dann, wenn sie Selektoren mit höherer Spezifität enthalten.

Ohne Ebenen konkurriert jede CSS-Regel anhand von Spezifität und Quellreihenfolge. Das führt zu Spezifitätskonflikten, wenn Reset-, Komponenten- und Utility-Stile um die Priorität kämpfen. Ebenen geben jeder Gruppe eine feste, vorhersehbare Priorität.

Deklarieren Sie Ebenen vorab in einer einzigen Anweisung. Die Reihenfolge der Deklaration bestimmt die Priorität — spätere Ebenen setzen sich gegenüber früheren durch.

Die Deklaration von @layer sollte am Anfang Ihres Stylesheets (oder der zentralen Importdatei) stehen. Nach der Deklaration können Sie in beliebiger Reihenfolge Stile zu Ebenen hinzufügen — die Priorität wird durch die Deklarationsreihenfolge bestimmt, nicht durch die Stelle, an der Stile hinzugefügt werden.

Da die Priorität einer Ebene zum Zeitpunkt ihrer Deklaration bestimmt wird, können Sie überall Stile zu einer Ebene hinzufügen — sogar bevor sie deklariert wurde, indem Sie auf sie vorwärtsverweisen. Entscheidend ist die deklarierte Reihenfolge.

Eine Deklaration in einer späteren Ebene setzt sich immer durch gegenüber einer Deklaration in einer früheren Ebene, unabhängig von der Spezifität:

Stile außerhalb jeder Ebene werden als nicht in Ebenen enthalten bezeichnet. Sie haben die höchste Priorität — sogar eine höhere als die zuletzt deklarierte Ebene. Verwenden Sie dies für Notfallüberschreibungen, die sich immer durchsetzen sollen.

Vollständige Prioritätsreihenfolge (von hoch nach niedrig für Autorenstile):

1. Stile außerhalb von Ebenen (außerhalb von @layer)
2. Zuletzt deklarierte Ebene (z. B. utilities)
3. Vorletzte Ebene (z. B. components)
4. Frühere Ebenen (base, reset)

!important in Ebenen ist kompliziert: Es kehrt die Reihenfolge der Ebenen für diese Deklaration um. !important in der frühesten Ebene setzt sich gegenüber !important in späteren Ebenen durch. Dies entspricht dem ursprünglichen Kaskadenverhalten von Benutzer- und Autorenstilen.

Ebenen können mithilfe der Punktnotation verschachtelt werden:

Eine realistische Ebeneneinrichtung eines Projekts:

Ebenen werden als @layer base, components, utilities deklariert. Die Stile welcher Ebene setzen sich bei einem Konflikt durch?

@layer richtet ausdrücklich geordnete Kaskadenebenen ein. Deklarieren Sie Ebenennamen in Prioritätsreihenfolge (zuerst die niedrigste). Spätere Ebenen setzen sich unabhängig von der Spezifität immer gegenüber früheren durch. Stile außerhalb von Ebenen haben die höchste Priorität. !important kehrt die Prioritätsreihenfolge der Ebenen für diese Deklaration um.