CSS @scope

ELI5 - The Vibe Check

The @scope rule lets you tell CSS only style things inside this box, and stop at that boundary over there. No more fighting specificity wars or prefixing every class with .my-widget- just to avoid leaking styles into the rest of the page. It's like drawing chalk lines around your component and telling your styles to stay inside the lines.

Real Talk

@scope is a CSS at rule that limits the reach of a set of style rules to a specific DOM subtree, with an optional donor element and a lower boundary where the scope stops applying. It provides native style encapsulation without relying on Shadow DOM, BEM naming conventions, or CSS Modules.

Show Me The Code

@scope (.card) to (.card-footer) {
  p { color: gray; }
}
/* Only paragraphs inside .card, and before .card-footer, are affected */

When You'll Hear This

"We wrapped the third party widget's CSS in @scope so it can't bleed into our layout." / "@scope let us drop half our BEM prefixes."