Svelte Scoped Styles: CSS That Can't Leak
Svelte styles are like house rules; they only apply inside that component and don't affect the neighbors. This is the default for any <style> tag in a .svelte file, preventing CSS conflicts.
Why it exists
To prevent CSS from one component accidentally affecting another. In large applications, global CSS can lead to style collisions and hard-to-debug visual bugs where a style change in one place unintentionally breaks the layout somewhere else. Scoping makes components truly self-contained and predictable.
The mental model
Think of Svelte's <style> block as creating a private style sheet for just one component. It's like giving each component its own isolated CSS sandbox, so you can write simple selectors like p or .active without worrying they'll clash with identical selectors used in other components.
How it works
Svelte processes your CSS at build time. It generates a unique hash for each component's styles and adds it as a class (like svelte-123xyz) to every styled element in that component's markup. A selector like p { color: red; } becomes p.svelte-123xyz { color: red; }. This class selector is what keeps the styles from leaking out. The same hashing logic is applied to @keyframes names to prevent animation conflicts.
When to use it
This is the default behavior in Svelte, so you use it anytime you write CSS in a component's <style> tag. It is the standard, recommended way to style components, ensuring they are modular and reusable without causing side effects. There's nothing to turn on; it just works.
When not to use it
If you truly need to apply styles globally, like for base typography, CSS resets, or a design system's utility classes, don't rely on scoped styles. Place these rules in a separate, global CSS file linked from your main HTML, or use the :global() modifier within a style block for specific exceptions.
One canonical example
If you write <style>p { color: blue; }</style> in a component named Card.svelte, only tags inside instances of the Card component will turn blue. A tag in Header.svelte will be completely unaffected. This works because Svelte adds a class, increasing the specificity of the rule to p.svelte-abc123, which will also take precedence over a global p selector.
Interview question
What is the primary mechanism Svelte uses to ensure that styles defined within one component's <style> block do not unintentionally affect other components?
- a.It automatically prefixes all CSS selectors with the component's filename to create unique rules.
- b.It compiles component-specific styles into separate CSS files that are dynamically loaded and unloaded with the component.
- c.It generates a unique hash and applies it as a class to elements, then modifies CSS selectors to target only those hashed classes.Correct
- d.It wraps each component's content in a Shadow DOM, which natively isolates its styles.
Why? this is the answer
Svelte achieves style scoping by generating a unique hash for each component, applying it as a class to the component's elements, and then modifying the CSS selectors to target these specific hashed classes. This prevents styles from leaking, unlike Shadow DOM (option D) which is a different encapsulation method.
Just read this? Test yourself on what you have been reading.
Read the original → svelte.dev
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 svelte — each one lists the topics its interview covers.
See open roles