A Paradigm-Shift for CSS Organization
Explore CSS cascade layers for specificity and order. Discover emerging features like logical properties, and utilize tools such as PostCSS to polyfill and combine functionalities seamlessly.
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.
A large codebase, or any project with multiple authors, can easily fall back on !important when specificity issues arise. With @layer , we can define groups of rule sets with a pre-determined order to reduce the likelihood of conflicts.
Consider this small example below, in which we create an ordering of layers, and then assign rules to those layers. Although the @baseline layer receives a p rule first, it still wins over the @reset layer because the ...