Firefox 146 shipped in December with support for CSS @scope, making it Baseline compatible across all major browsers. That milestone matters because @scope directly attacks a problem that has driven developers toward Tailwind, CSS-in-JS, and BEM for years: style leakage. Specificity wars, autogenerated selectors like .jsx-3130221066, and unwieldy class names like app-user-overview__status--is-authenticating are symptoms of the same root cause. @scope treats that cause.
The at-rule lets you bind styles to a specific DOM subtree with a single root selector, no naming convention required. A button's child spans become selectable as span:first-child and span:last-child inside @scope (.primary-button), instead of .button__text and .button__icon. You keep inheritance, you keep the cascade, and you keep native browser DevTools. The article walks through basic syntax, then introduces a second argument to the rule that creates a lower boundary, stopping styles from reaching specific nested elements entirely.
The real reason to read this in full is that second argument. Scoping a root is straightforward. Scoping a root with a controlled floor changes how you think about component isolation without reaching for a build tool. The piece also benchmarks @scope against Cascade Layers and BEM directly, which makes the tradeoffs concrete rather than theoretical.
[READ ORIGINAL →]