skip to content

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:

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:

Resources

Timeline & Documents

Browser Support

Data on support for the css-cascade-layers feature across the major browsers from caniuse.com

Past Events

Everything 'Cascade layers'

A Whole Cascade of Layers

» post

I really enjoyed Dave Rupert’s Modern alternatives to BEM, which concludes with a link to my redesign. So let’s talk about my seven-layer burrito of styles – what he calls SBRDFLT. What’s that all about?

Styling the Intrinsic Web

» podcast

I talk with Noel Minchow about how to style the intrinsic web, what that means, and how it’s compatible with responsive design.

Cascading Layers of !mportance

» talk

Earlier this year, all the major browsers released Cascade Layers, with the potential to fundamentally change how we write styles. But fundamental changes require us to re-think how all the pieces fit together.

Making Sense of CSS Layers and Scope

» podcast

CSS is evolving rapidly and new features come online all the time. Join Morten & Miriam to talk about what CSS layers and scope are all about and how they will change how we work with and think about the cascade in the future.

Styling the Intrinsic Web

» talk

Over the last decade, Responsive Web Design and Object Oriented CSS have grown from exciting new trends into the foundations of modern, component-driven web design. But our medium is not done evolving.

What’s Happening in CSS & Sass

» podcast

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.

CSSWG, Container Queries, Scope, and Layers

» podcast

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

» podcast

I chat with Bruce Lawson & Vadim Makeev about Sass & Susy, CSS Layers & compatibility, Container Queries, and the CSS Working Group.

Container Queries & The Future of CSS

» talk

New CSS proposals like Container Queries, Cascade Layers, Scoped Styles, and Nesting are all aimed at improving the way we write responsive components and design systems.

CSS Cascade 5 (Layers)

» spec

Cascade & Inheritance Level 5 defines Cascade Layers – allowing authors to define explicit contained layers of specificity.