CSS @scope as native alternative to BEM and CSS-in-JS for design systems¶
Insight: CSS @scope (now Baseline compatible after Firefox 146 added support in December 2025) provides native style isolation without BEM naming conventions or CSS-in-JS build tooling. It allows scoped styles with upper and lower boundaries ("donut scoping"), enabling precise targeting without specificity wars or tight DOM coupling. This eliminates the need for auto-generated selectors (.jsx-3130221066) and restores native browser debugging capabilities.
Detail: The @scope rule takes two arguments: root selector and optional end boundary (@scope (nav) to (ul) { ... }). Benefits over BEM: no class name management, selectors based on native HTML elements, resilience to HTML structure changes. Benefits over CSS-in-JS: no build configuration, native browser debugging, proper separation of concerns. Relevant to design systems because it solves the "style leak anxiety" that drives teams toward heavyweight abstractions.