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:


Timeline & Documents

Browser Support

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

Past Events

Everything 'Cascade layers'