Design AtlasA descendant selector like `.card p` matches "any p inside a card." Nest another component inside that card — another card, a widget — and the selector often reaches further than intended, into the nested component. Avoiding that has meant reaching for scoping tools like CSS Modules or styled-components.
`@scope (.card) to (.card__nested) { p { color: var(--accent) } }` declares the upper (`.card`) and lower (`.card__nested`) bound directly in CSS. Anything past the `to` boundary is excluded — "donut scoping" — so a nested component isn't touched automatically. `&` can reference the scope root, pairing nicely with native CSS nesting.
Check caniuse/MDN baseline for support. Without it, build-time or structural scoping — CSS Modules, BEM naming, shadow DOM — remains necessary.
When to use
Nesting the same component inside itself — a card inside a card — and preventing outer styles from leaking in, using CSS alone.