Early Days for CSS Scoping

The CSS scoping proposal from Miriam Suzanne has reached working-draft status in the cascade specification. That is further than any previous attempt: the Level 1 scoping spec never gained traction, and the only shipped implementation, <style scoped>, was later pulled from both the spec and browsers.

The core idea is defining a chunk of styles that belong to one component without touching anything else:

<div class="media">
  <img alt="Proper alt." src="...">
  <div class="content">
    <p>...</p>
  </div>
</div>

For markup you already treat as a component, this is appealing, because the dependency is visible in the CSS itself:

@scope (.media) {
  :scope {
    display: grid;
    grid-template-columns: 50px 1fr;
  }
  img {
    filter: grayscale(100%);
    border-radius: 50%;
  }
  .content { ... }
}

Two things stand out. The styles are explicitly tied to the media component, which makes them easy to read and maintain as a unit, and the inner <img> gets styled without inventing a class name for it or risking the rule leaking out to other images.

Scoping versus prefixing a parent class

Prepending the parent class gets you much of the way there:

.media {
}
.media img {
}
.media .content {
}

The repetition is ugly, but native CSS nesting collapses it:

.media {
  & img {
  }
  & .content {
  }
}

Nesting therefore covers the simple cases. Several features of the scope proposal do not have an equivalent in that approach.

Donut scope

Scoping can be stopped where you want it, an idea known as a "donut scope". Ending the inner scope at a specific class:

@scope (.media) to (.content) {
  p { }
}

covers rules that would otherwise reach into regions they should leave alone:

<div class="media">
  <img alt="Proper alt." src="...">
  <p>This is stylable in scope.</p>
  <div class="content">
    <p>This is NOT styleable in scope.</p>
  </div>
</div>

Nearest ancestor and overlapping scopes

The nearest ancestor situation described in the explainer is arguably the most interesting of the unsolved problems, and one worth reading up on directly. Questions about multiple overlapping scopes, and how nesting syntax will interact with scoping, add further complexity to reason through, and the accompanying blog posts lay the details out as they develop.