Revolutionizing CSS: Introducing Cascade Layers
For developers, CSS can be a double-edged sword. On one hand, it’s relatively easy to learn. On the other hand, it can be unforgiving without a solid structural plan. The cascade, a core CSS algorithm, is particularly notorious for its resistance to control. However, a new feature is about to change the game: cascade layers.
The Cascade Conundrum
The cascade’s primary job is to resolve competing property values assigned to elements within a document. It does this by assessing an unordered list of CSS declarations and sorting them according to their declaration’s precedence. The cascade checks each declaration against five criteria: origin and importance, encapsulation context, style attributes, specificity, and order of appearance.
Enter Cascade Layers
Cascade layers is a new CSS feature that allows style rules to be split into several layers using the @layer at-rule. This feature enables developers to determine the order of specificity of the layers, giving them greater control over the cascade. With cascade layers, the browser will always respect the order of the cascade layers and ignore the specificity and order of appearance of the selectors.
Creating Cascade Layers
Cascade layers can be defined in two ways: using URL imports with the @import at-rule or using layer blocks. Layers can also be declared without imports or layer blocks, by instead using an identifier (name) that can be referenced later in the same layer scope.
Layer Order and Specificity
A layer’s priority is based on when it first appears in the stylesheet. The cascade will always pick the winning rule from a selector associated with a cascade layer that comes later in the layer order. This means that a simple later-declared layer will always take precedence and override an earlier-declared layer, even if the earlier-declared layer has a greater cascade weight.
Unlayered Styles and Nested Layers
Unlayered styles follow style rules outside of the cascade layers and take the highest priority over any layers in a stylesheet. Nested layers, on the other hand, can be used to append extra styles to a layer. The specificity behavior within layers is the same as the layer order specificity, with layers that come later in a nested layer stack having the highest priority.
Cascade Algorithm Positioning and Polyfill
Once cascade layers is fully supported, it will be positioned right before the specificity and order of appearance criteria in the CSS cascade algorithm. Unfortunately, at the time of this writing, there aren’t any polyfills available for cascade layers, and the @support property doesn’t currently work with this feature.
Browser Support and Future Outlook
The cascade layer feature is currently experimentally supported by default in Chrome 99+, Firefox Nightly 97+, and Safari Technology Preview 137+. With cascade layers, developers can finally take control of the cascade and curb intricacies such as regressions and styles collision in codebases.