Deep Dive Into the Cascade
April 2, 2025
The CSS Cascade seems simple enough when you’re dealing with a single stylesheet. But in real world applications, we use bundlers like webpack or vite to load thousands of files. How can we ensure that our CSS always loads in the correct order?
The @layer CSS rule allows devs to “declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers mdn link.” This is exceptionally useful for design systems maintainers who often don’t control the environment in which their components are used.
Source: Deep Dive Into the Cascade: Use the @layer Rule to Write More Deterministic CSS
I don’t think Bert Bos and Håkon Wium Lie when they first proposed CSS imagined the scale of its use today.
The cascade and inheritance, which make CSS so powerful are also challenging when a page might draw style from dozens of style sheets, first and third party. This is made even more challenging when the load order of style sheets may be difficult to determine when using bundlers.
The Cascade, and inheritance (often confused for each other) along with specificity do cause challenges for developers and numerous methodologies (Nicole Sullivan’s OOCSS, BEM) and technologies (CSS-in-JSS, Tailwind) have emerged to tame these admittedly at times complex aspects of CSS.
CSS Cascade Layers is the first large scale attempt to address the complexity of developing large scale sites and applications with CSS. Now baseline, and widely supported in most browsers since early 2022 (late 2024 in Android browsers) it provides a mechanism to create different ‘layers’ of CSS, within which styles cascade independently of other layers.
Mae Capozzi introduces these here, and for a more in depth look at a couple of talks on the topic here on Conffab:
Cascade Layers from Bramus Van Damme at Hover ’22
CSS Architecture with Layers, Scope, and Nesting also from Bramus Van Damme at Summit ’22
