# Using CSS-in-JS with Svelte

DevFeed: [Using CSS-in-JS with Svelte](<https://devfeed.tech/articles/using-css-in-js-with-svelte-3042.md>)

Original publisher: [Read original article](<https://svelte.dev/blog/svelte-css-in-js>)

Author: Rich Harris

Published: 2018-12-26T00:00:00Z

Content type: tutorial

Language: en

Sources: [Svelte blog](<https://devfeed.tech/sources/svelte-blog.md>)

Topics: [Svelte](<https://devfeed.tech/topics/svelte.md>), [CSS](<https://devfeed.tech/topics/css.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [performance](<https://devfeed.tech/tags/performance.md>), [svelte](<https://devfeed.tech/tags/svelte.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>)

## AI overview

This article explains how to use CSS-in-JS with Svelte when styles need to be shared across components or optimized at the application level. It demonstrates Emotion for generating scoped class names and cautions that runtime overhead and limited build-time extraction can affect performance.

## Source excerpt

CSS is a core part of any web app. By extension, a UI framework that doesn't have a built-in way to add styles to your components is unfinished. That's why Svelte allows you to add CSS in a component's <style> tag. Co-locating your CSS with your markup means we can solve the biggest problems developers face when writing CSS without introducing new ones, all while providing a rather nice development experience. But Svelte's style handling does have some limitations. It's too difficult to share styles between components, or apply app-level optimisations. These are areas we plan to address in future versions, but in the meantime if you need those things you can use any framework-agnostic CSS-in-JS library. For example Here, we're using Emotion to generate scoped class names that can be used across multiple components: It's important to note that most CSS-in-JS libraries have a runtime library, and many don't support statically extracting styles out into a separate .css file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application! Note that you can mix-and-match -- you can still use Svelte's built-in CSS handling alongside a CSS-in-JS library.