A Paradigm-Shift for CSS Organization

CSS cascade layers provide a new at-rule (@layer) that assists authors in managing the cascade. The @layer is a powerful tool for controlling specificity, which it does by orchestrating the order of rule sets. In an impressively coordinated cross-browser rollout, CSS cascade layers were made available from Chromium 99, Safari 15.4, and Firefox 97.

What does @layer do? It allows us, as authors, to be explicit about controlling two key elements of the “C” in CSS—the cascade. With @layer, the power is in our hands to pre-emptively mitigate conflicts between specificity and order of appearance—the last two priorities the browser considers when applying an element’s style.