@scope keeps CSS where you put it, with no BEM naming and no build step.
Pick a selector strategy below and watch which .title elements it styles.
The CSS you build is really injected into this page — the verdicts are
measured with getComputedStyle, not faked.
⚠️ This browser doesn't support @scope (needs Chrome 118+, Firefox 128+, or
Safari 17.4+). The @scope option below will style nothing — which is
exactly the graceful degradation the post describes.
1 Pick a strategy, then draw the boundary
Selector strategy
Lower boundary
2 The CSS you just wrote
3 What it actually styled
.page
Page heading
outside the card—
.card
Card title
.card › .header—
Section title
.card › .body—
.testimonial — a nested component
What people say
.card › .testimonial—
–of 4 titles styled.
4 Bonus: proximity is a tiebreaker, not a trump card
Two scopes both style .button. The one whose scoping root is
closest wins — but only when specificity ties. In the cascade, scope proximity sits
below specificity, so raising the far rule's specificity takes the win back.