Scoped CSS: Styling Components Without the Cascade Mess
@scope fences off your CSS, applying styles only within a specific part of the DOM. This lets you style a component without your rules leaking out or clashing with global styles.
Why it exists
Web pages are built from components like cards, headers, and sidebars. Styling one component without accidentally affecting another is a constant challenge. Overly specific selectors like .card > div > h2 are brittle and break when HTML changes, while broad selectors like .card h2 can leak and cause unintended side effects.
The mental model
Think of @scope as creating a "donut" of influence for your CSS. You define an outer boundary (the scope root) and an inner boundary where the styles stop (the scope limit). Your styles only apply to elements within that ring—not outside it, and not inside the "hole". This gives you precise control without high specificity.
How it works
You use the @scope at-rule, which defines a scope root and an optional scope limit. For example: @scope (.article-body) to (.comments) { ... }. This applies the styles inside the curly braces to elements within .article-body, but stops applying them once it encounters a .comments element, even if it's nested inside .article-body. This prevents styles for the article from leaking into the comments section.
When to use it
Use @scope for component-driven styling, especially in design systems. It's perfect for creating robust styles for a card, modal, or media-player that work predictably, no matter where they are placed in the DOM, without their internal styles affecting the rest of the page.
When not to use it
Avoid @scope for truly global styles like typography resets, theme variables, or base link colors. A standard stylesheet is better for rules that should apply everywhere. It's also overkill for very simple documents where selector clashes are not a concern.
One canonical example
To style an image inside a .media-card but not an image inside a nested .ad-slot within that card, you can define a lower boundary. The rule @scope (.media-card) to (.ad-slot) { img { filter: grayscale(100%); } } will apply the grayscale filter to images in the card, but will stop at the ad slot, leaving the ad's images in full color.
Interview question
Consider an @scope rule with both a scope root and a 'to' limit. What is the primary effect of including the 'to' limit?
- a.It defines a specific inner boundary where the scoped styles will cease to apply, even if elements are still within the root.Correct
- b.It ensures that styles only apply to elements directly within the scope root, not any deeper descendants.
- c.It automatically applies a default set of global styles to all elements that fall outside the defined scope.
- d.It allows the scoped styles to be inherited by elements outside the defined scope, but only if they match the limit selector.
Why? this is the answer
The 'to' limit creates an inner boundary, preventing styles from applying to elements that match the limit selector, even if they are descendants of the scope root. This forms a 'donut hole' in the scope. Option B is incorrect because styles apply to all descendants within the root until the 'to' limit is encountered, not just immediate children.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #scoping
- #design systems
- #css cascade
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles