Introduction to scoped and global CSS in Svelte

One of the great advantages of Svelte is that scoped CSS is built in as a standard feature. This means that you have more than one choice when it comes to writing CSS and if you choose scoped CSS you will never ever again have to think about classes that overlap.

In this article, we will dive into what scoped CSS is, what the pros and cons are, and not least how you can implement it in your Svelte project.

What is scoped CSS?

Scoped CSS is a wonderful thing, and it will most likely do wonders for your project. Normally when writing CSS code you have to think about classes and id's to identify the object that should receive the styling. With scoped CSS you don't have to think about any of this. Automatically when writing your CSS styling inside a component it will be scoped to that specific component.

The way it happens is that when you add the <style> tags inside your component and start writing CSS it will generate a unique class and add it to your component. This way your CSS styling will be scoped to this specific component only and not be applied to anything else in the DOM (Document object model). This is specifically good to use if you are splitting your components into reusable elements such as paragraphs, headlines, etc.

At Svelte's website, they have a great example of how scoped CSS works. There you can copy/paste the script tag from the left and add it to the example to see how it looks like when you add the nested paragraph. Once you have done that you will see the example only applies the paragraph styling to the paragraph first added to the component. Click here to interact with the example from Svelte.

How to write global CSS in Svelte

With Svelte you are not forced to be using scoped CSS styling. In fact, you can be using the traditional CSS files like you used to, or you can be using the :global selector inside your <style> tags to write CSS that will target elements globally in your project.

Here is an example of how the :global selector looks like. This selector will allow you to add styling that will be used globally in your project (It will be used on all matching elements in the DOM).

<p class="Normal">This is an example paragraph</p>
<style>
  :global(p.Normal) {
    color: purple;
  }
</style>

How to apply scoped CSS in your Svelte project

Applying scoped CSS in your Svelte project is both easy and fast! All you have to do is to add the <style> tags below your HTML code and start writing general CSS styling just like the example below. Once you compile your project Svelte will automatically assign your elements a unique class and apply the styling to them.

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

<style>
   p {
      color: purple;
      font-family: 'Comic Sans MS', cursive;
      font-size: 2em;
   }
</style>

When should scoped CSS be used?

Scoped CSS is great to use in many instances, but sometimes you want to be using global CSS instead or maybe a CSS file. When dealing with reusable elements you reuse again and again it is smart to be using scoped CSS since you only have to write the code once. As soon as you are dealing with elements that are customized every time or not imported it will be smarter to use global CSS.

The reason for this is that when using reusable components that you import again and again, then you already wrote the CSS styling and won't have to redo it over and over again. As a general rule in development, you should never write code more than once. What this means is that if you know an element has to be used more than once in your project, then you should break it into its own component and give it scoped CSS. Otherwise, you will find yourself writing the same code over and over again and end up with a bloated project full of unused code.

There is a fine line between when you should be using scoped CSS and when you should use global CSS. But to make a long explanation short: When dealing with reusable components you should use scoped CSS, and when dealing with code that cannot be broken into its own component, then you use global CSS so that you don't have to write the same CSS twice.

Wrapping up

So, by now you know a bit about what scoped CSS is in Svelte and how it works. You have seen how you can apply it in your own project and we have talked about when to use it and when not to.

We hope that you enjoyed this little tutorial and now find yourself a lot richer in knowledge. If you still have questions about this article, scoped CSS, or think that something should be added to this article, please don't hesitate to contact us through our contact page, then we will get back to you as fast as possible.

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.