@scope: A Native CSS Scoping Boundary

@scope (.card) { } declares .card as a scope root. Every selector written inside that block is implicitly restricted to matching only within elements that are descendants of something matching .card — a bare img selector inside the block behaves like .card img, without you having to write the prefix yourself, and critically, without any risk of it accidentally matching an unrelated img elsewhere on the page.

This is the property BEM, ITCSS, and SMACSS all work hard to approximate through naming and file-ordering discipline: @scope makes it structural instead of conventional. A typo or naming inconsistency can't accidentally break the isolation, because the browser enforces the boundary itself.

Sometimes a component contains a nested region that should manage its own styling independently — a card containing a rich-text area, or a widget embedding another, unrelated widget. The optional to clause defines exactly this: @scope (.card) to (.card__actions) scopes styles to .card, but explicitly excludes .card__actions and everything inside it, leaving that region free of the outer scope's rules entirely.

This pattern, called donut-scoping (styling applies in a ring around an excluded center), is genuinely difficult to express with BEM or ITCSS alone — you'd need very careful, deliberately unscoped exceptions layered on top of your naming convention to achieve the same effect.

When two @scope blocks could both style the same element — say, a dark-theme scope and a card-component scope both defining .btn — @scope introduces a tiebreaking rule that has no equivalent anywhere else in CSS: whichever scope's root element is closest to the target element in the actual DOM tree wins, regardless of source order or specificity.

This matters specifically for nested, overlapping component scenarios that are increasingly common in component-based UIs — a themed wrapper containing a component, both trying to style the same inner element. Proximity-based resolution generally matches developer intuition ('the more locally-scoped rule should win') better than source order or specificity alone would.

A Real Scoping Boundary, Natively. BEM simulates scoping through naming discipline. CSS Modules simulate it through a build step. @scope is CSS's own native attempt at a real scoping boundary: rules inside a @scope block only apply within a defined start and, optionally, stop boundary — no naming convention or bundler required.

Defining A Scope Root. @scope (.card) establishes .card as the scoping root — every selector inside the block is implicitly scoped to apply only within elements matching .card, without needing to repeat .card as a prefix on every single rule.

Scope Roots. Inside @scope (.card) { img { } }, which images does the rule affect?

• →Every <img> on the entire page
• →Only <img> elements that are descendants of an element matching .card
• →No images — img can't be used inside @scope

Donut-Scoping With A Lower Boundary. @scope supports an optional 'to' clause defining a lower boundary that rules won't cross — @scope (.card) to (.card__actions) styles everything inside .card except inside .card__actions and its descendants, a pattern called donut-scoping that's awkward to express with any naming convention alone.

Donut-Scoping. In @scope (.card) to (.card__actions) { a { } }, are links inside .card__actions affected?

• →Yes, the 'to' clause has no effect on matching
• →No — the 'to' boundary excludes .card__actions and its descendants from the scope
• →Only direct child links of .card__actions

Proximity-Based Specificity For Overrides. When multiple @scope blocks could style the same element, the one with the scope root closest to that element in the DOM wins, regardless of source order or normal specificity — a genuinely new tiebreaking mechanism designed specifically for nested, overlapping component scopes.

Proximity Tiebreaking. When two different @scope blocks both style the same element, what decides which one applies?

• →Whichever @scope block appears later in the file
• →Whichever scope root is closest to the element in the DOM tree
• →Alphabetical order of the scope root selector

Native Scoping Achieved. You now know how to define a native scoping boundary, exclude nested regions with donut-scoping, and understand @scope's unique proximity-based tiebreaking mechanism. This gives CSS a genuine answer to component isolation that doesn't rely on naming discipline or a build tool.

Scope A Rule To A Subtree. @scope limits a rule so it only applies within the boundaries you declare.