How does Svelte handle component styling and scoped CSS?

In Svelte, component styles are designed to be highly encapsulated and modular. This ensures that each Svelte component can have its own dedicated CSS that does not interfere with other components by default. Below, I will explain how Svelte manages component styling and scoped CSS.

1. Component Styling Encapsulation

In Svelte, each component can directly include CSS code within its .svelte file, placed inside the <style> tag. For example:

svelte
<script>
  let color = 'blue';
</script>

<style>
  p {
    color: blue;
  }
</style>

<p>This is a blue paragraph.</p>

In the above example, the CSS rule color: blue; defined within <style> applies exclusively to the <p> element in the current component.

2. CSS Scoping

By default, Svelte automatically adds a unique hash-based class name to all elements within the component and incorporates the corresponding selectors into the component's CSS definition. This ensures that CSS rules only target elements inside the component and do not affect external elements, achieving scoped CSS.

For example, the compiled HTML and CSS might appear as follows:

html
<p class="svelte-1xyzabc">This is a blue paragraph.</p>

css
.svelte-1xyzabc {
  color: blue;
}

3. Global Styles

Although styles are encapsulated by default, Svelte provides a mechanism to define global styles. This is achieved using the :global() pseudo-selector. For instance, to apply styles globally to the <p> element, you can write:

svelte
<style>
  :global(p) {
    color: blue;
  }
</style>

4. Example Application

Suppose we are developing a user interface with multiple components, such as buttons and input fields. Each component can have its own style file defining rules that are effective only for that component. This approach helps avoid style conflicts and enhances component independence and reusability.

Conclusion

In this manner, Svelte not only ensures style encapsulation and component independence but also offers flexible methods for defining global styles. This enables developers to more easily manage and maintain styles in large applications while ensuring consistency and predictability.