Cascade & Inheritance Level 6 defines scoped styles – allowing authors to provide bounded ranges for selector-matching, and give priority to more ‘proximate’ scope origins.

| spec

CSS Cascade 6 (Scope)

Specification for Scoped Styles

Bookmark from W3C CSS Working Group

There are many overlapping and sometimes contradictory features that can live under the concept of “scope” in CSS – but they divide roughly into two approaches:

  1. Total isolation of a component DOM subtree/fragment from the host page, so that no selectors get in or out unless explicitly requested.
  2. Lighter-touch, style-driven namespacing, and prioritization of “proximity” when resolving the cascade.

That has lead to a wide range of proposals over the years, including an old scope specification that was never implemented. Focus moved to Shadow-DOM, which is mainly concerned with approach #1 – full isolation. Meanwhile authors have attempted to handle approach #2 through convoluted naming conventions (like BEM) and JS tooling (such as CSS Modules, Styled Components, & Vue Scoped Styles).

In Cascade Level 6 we are developing a new native CSS approach to scope.

Timeline & Documents

Browser Support

A prototype of @scope is available in Chrome Canary with the Experimental Web Platform Features flag enabled.

Past Events

Everything 'Css scope'

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.

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 6 (Scope)

» spec

Cascade & Inheritance Level 6 defines scoped styles – allowing authors to provide bounded ranges for selector-matching, and give priority to more ‘proximate’ scope origins.