Cascade & Inheritance Level 5 defines Cascade Layers – allowing authors to define explicit contained layers of specificity.
The CSS Cascade is designed to balance concerns, and give some styles priority over others. That starts with a balance of power between three “origins” – users, authors, and user agents (aka browsers).
By default, author styles override user styles,
which override user-agent styles.
However, the order is reversed
for any styles that are marked as !important
–
so that browsers can define what is out of bounds,
and users can insist on their most essential preferences.
Site authors are often able to write styles without much consideration for the other origins involved. But as site styles have become more complex – relying on larger teams and third-party code – there are also many ‘concerns’ represented within the single origin. In order to balance those concerns, authors have been limited in their control of the cascade:
- The binary
!important
flag can be applied to individual style declarations, with important declarations overriding non-important declarations. - The ‘selector specificity’ heuristic gives more narrowly targeted (specific) selectors priority over more broadly applied selectors.
- Later declarations override earlier declarations.
Over the years authors have developed a number of different ‘conventions’ to help manage styles, especially in order to ‘tame’ or control the cascade. In many cases, these conventions rely on balancing concerns between defaults, basic typography, design systems, component libraries, themes, and third-party tools.
At the end of 2019 I suggested that authors should be able to define ‘custom origins’ within the existing cascade origins. The goal was to:
- provide a more explicit tool for balancing concerns and resolving issues often seen as “specificity problems”
- help teach the powerful concepts already built into the core of the language
- make it more clear how
!important
is designed to work
Resources
- A Complete Guide to CSS Cascade Layers at CSS-Tricks
- Getting Started With CSS Cascade Layers by Stephanie Eckles at Smashing Magazine
- The Future of CSS: Cascade Layers by Bramus Van Damme
- MDN documentation
Timeline & Documents
- PostCSS Polyfill (May 12, 2022)
- Released in Browsers (Feb 8, 2022)
- Working Draft (Jan 19, 2021)
- Explainer (Jan 8, 2021)
- Public Notes (Nov 12, 2020)
- Editor’s Draft (Sep 15, 2020)
- Initial Proposal (Oct 29, 2019)
Browser Support
12 ‘cascade layers’ episodes
2022
A Complete Guide to CSS Cascade Layers @ CSS Tricks
Cascade layers are a new CSS feature that allows us to define explicit contained layers of specificity.
CSS Cascade 5 (Layers) @ Released in Browsers
Cascade & Inheritance Level 5 defines Cascade Layers – allowing authors to define explicit contained layers of specificity.
2021
What’s Happening in CSS & Sass @ Front End Nerdery
A podcast focusing on front end development but also covering a wide range of web development and design topics. We talked about CSS, Sass, and work being done in the W3C CSS Working Group.
CSS Container Queries, Layers, Scoping and More @ Syntax.fm
In this episode of Syntax, Scott and Wes talk with Miriam about all things CSS – container queries, layers, scoping, and more!
CSSWG, Container Queries, Scope, and Layers @ Word Wrap Show
I talk with Claire and Steph about my journey into webdev and onto the CSSWG, what I find frustrating about how others use CSS, and the three specs I’m working on.
Container Queries & the CSSWG @ The F-Word
I chat with Bruce Lawson & Vadim Makeev about Sass & Susy, CSS Layers & compatibility, Container Queries, and the CSS Working Group.