Firefox 146 shipped in December with support for CSS @scope, making it Baseline compatible across all major browsers. That milestone matters because @scope offers a direct alternative to two dominant but costly approaches to style isolation: rigid naming conventions like BEM and CSS-in-JS frameworks like styled-components. Both exist to solve the same problem, style leakage in large applications, and both introduce significant tradeoffs. BEM demands consistent discipline across every developer on a project, and a single deviation breaks the system. CSS-in-JS offloads naming to build tools, produces autogenerated selectors like .jsx-3130221066, and locks debugging to dev-compiled builds instead of native browser tooling.
The @scope at-rule scopes styles to a specific DOM subtree using a single root selector, no class naming conventions required. A button component that previously needed classes like button__text and button--primary now needs only one class on the root element, with child selectors like span:first-child written against native HTML inside the scope block. Crucially, @scope does not abandon the CSS Cascade or inheritance. It works with them, which means browser DevTools, live debugging, and standard CSS features all remain fully operational. MDN defines it as targeting elements precisely without overly-specific selectors and without coupling selectors too tightly to DOM structure.
The full article goes beyond basic usage and into @scope's second argument, which creates a lower boundary, a donut-shaped exclusion zone that stops styles from reaching nested components. That detail is where the feature gets genuinely powerful for component-based architectures, and it is worth reading in full at Smashing Magazine.
[READ ORIGINAL →]