Cascade Layers
CSS-Mechanismus, der der Kaskade eine neue Stufe oberhalb der Spezifität hinzufügt: Welcher Layer eine Regel gehört, entscheidet, bevor deren Spezifität überhaupt zählt.
Das klassische Elend: Eine Drittanbieter-Bibliothek, deren .btn.btn-primary die eigene .btn-Regel schlägt, worauf man mit einem spezifischeren Selektor antwortet, dann noch einem, und am Ende mit !important. Mit @layer reset, library, components, utilities; wird die Reihenfolge einmal vorab festgelegt, und ein simpler Klassenselektor im letzten Layer schlägt alles im ersten.
Die Reihenfolge richtet sich danach, wo die Layer zuerst benannt werden, nicht danach, wo die Regeln stehen — Imports dürfen also in beliebiger Reihenfolge erfolgen. Eine Überraschung: Styles außerhalb jedes Layers schlagen jeden Layer-Style. Seit 2022 in allen wichtigen Browsern unterstützt.