Svelte and CSS

Now that I’ve started writing this blog post, I realize that I should have written it earlier. Because I am a big fan of how Svelte handle CSS and styling in general. I always thought it was quite obvious, until someone tweeted this, asking a question about it.

So, this post is an attempt to explain how Svelte handle CSS and styling in general.

For this blog post, I will use the Svelte REPL to show some examples. A Svelte REPL is just a place where you can write Svelte code and see the result, the code output and console logs. You can also save your code and share it with others. It’s a great tool to learn Svelte.

Here is the REPL I will use for this post: https://svelte.dev/repl/c5e739eddf2b44af93590a00eb8f1279?version=3.55.1.

Scoped CSS

Most of the time, your Svelte components will have the following structure:

The script tag will contain your JavaScript code, below it, you will have your HTML markup, and at the end, you will have your CSS styles. This is the default structure of a Svelte component.

Per default, styles that you write in the style tag of a component will be scoped to that component. This means that the styles will only apply to the component itself, and will not leak to elements in others components .

Consider the following two components from the REPL:

Here is what the output looks like:

Notice that even if we have two  h2  elements, the color CSS property is not applied to the  h2  in the  App  component.

We can add a class to the  h2  in the  App  component, and then apply the color CSS property to that class, and it will work:

Now the two  h2  elements have different colors, without the styles of one of them leaking to the other.

Let’s look now at the HTML output of the  App  component:

Svelte can now create the styles as follows:

When you create a  style  tag in a component, Svelte will add a random class string to all the HTML elements that are targeted by the CSS styles. In the example above, the  h2  in the  App  component has the class  svelte-1rf5n5a , and the  h2  in the  Scoped  component has the class  svelte-1qapnsy.

What I particularly like about this approach is that any class name added to the HTML elements are not overwritten by Svelte. This allows having more readability in the HTML markup.

Scoped styles obviously means that you can have the same class name in different components, and they will not conflict with each other.

Global CSS

Sometimes, you will want some styles to be applied to all the components of your application. For example, you might want to have a CSS reset, or some global styles for headings, paragraphs, etc.

Svelte makes it easy to do that with the  :global(...) :global(...)  modifier. Let’s look at an example with a new component:

Not only the h3 in the Global component will have the color CSS property, but all the other h3 elements in the app will have it too:

The styles for global CSS look like this:

Global styles can also be applied to class names, IDs, or any other CSS selector.

Importing CSS

Another thing I like about Svelte is how easy it is to import styles to a component. Let’s look at an example:

Then, in our component, we can import the styles like this:

Svelte will automatically inline the styles from the  global.css  file in the component, and the output will look like this:

Inlining styles helps with performance, as the browser will not have to make a request to the server to get the styles.

Of course, you can style overwriting the styles from the imported file:

This will apply to red color to the paragraph even though the global.css file has a different color.

Conclusion

There are many ways to style Svelte components, and I hope this article has given you a good overview of the different options available.

You can read more details about how Svelte handles styling in the official documentation.