← Writing

Modern CSS Scope

Using CSS @scope rule to create scoped styles without runtime overhead or build-time processing.

Modern CSS introduces the @scope rule, which provides a powerful way to scope styles to specific elements. This creates an elegant solution for component-based styling without build-time processing or CSS-in-JS runtime overhead.

The @scope rule allows you to define a scoping root and an optional scoping limit. Styles within the scope only apply to elements within that boundary, making it perfect for component-based thinking and modular HTML structures.

Basic Scoping

The simplest use case is scoping styles to a component using a data-scope attribute:

<!-- HTML -->
<div data-scope="Card">
  <h1>Title</h1>
  <p>Content here</p>
</div>

/* CSS */
@scope ([data-scope="Card"]) to ([data-scope]) {
  h1 {
    color: var( --primary-600);
  }
  p {
    margin-bottom: 1rem;
  }
}

The @scope ([data-scope="Card"]) rule ensures that all styles within it only apply to elements inside the component with that scope attribute. The to ([data-scope]) part creates a scoping limit, preventing styles from leaking into nested components.

Nested Components

When components are nested, the scoping limit prevents parent styles from affecting child components:

<!-- HTML -->
<div data-scope="Article">
  <h1>Article Title</h1>
  <div data-scope="Card">
    <h1>Card Title</h1>
    <p>Card content</p>
  </div>
</div>

/* CSS */
@scope ([data-scope="Article"]) to ([data-scope]) {
  h1 {
    color: var( --primary-600);
    font-size: 2rem;
  }
}

@scope ([data-scope="Card"]) to ([data-scope]) {
  h1 {
    color: var(--neutral-700);
    font-size: 1.5rem;
  }
}

In this example, styles scoped to Article won't affect the Card component because of the to ([data-scope]) limit. Each component maintains its own style isolation.

Benefits

  • No runtime overhead – Styles are plain CSS, parsed by the browser
  • No build step required – Works with vanilla HTML/CSS and any build tool
  • Automatic isolation – Scoping limits prevent style leakage
  • Browser-native – Uses modern CSS features supported by all modern browsers

Browser Support

The @scope rule is now supported in all modern browsers. Firefox added support on December 2025, completing the browser coverage.

Closing Thoughts

CSS @scope creates a powerful, zero-runtime styling solution for component-based thinking. It brings the benefits of scoped styles without the complexity of CSS-in-JS libraries or build-time CSS processing. With native browser support, it's ready to use in any modern web project.