This practice, called colocation, has been covered in an excellent blog post by Kent C. Often times, you will end up with dead code in your CSS because there's no easy way to tell that the styles aren't being used.Ī better approach for organizing your code is to include everything related to a single component in same place. As the size of the application grows, it quickly becomes difficult to tell which styles are used by each component. css files in a src/styles directory, while all of your React components live in src/components. If using plain CSS, you might put all of your. Note: CSS Modules also provide locally-scoped styles.Ģ. There is no way the padding and border can accidentally get applied to unrelated elements. For example, imagine you're making a list view where each row should have some padding and a border. When writing plain CSS, it's very easy to accidentally apply styles more widely than you intended. The Good, The Bad, and the Ugly of CSS-in-JSīefore we get into the nitty-gritty of specific CSS-in-JS coding patterns and their implications for performance, let's start with a high-level overview of why you might choose to adopt the technology, and why you might not.ġ. We'll briefly discuss compile-time CSS-in-JS at the end of the article. Runtime CSS-in-JS simply means that the library interprets and applies your styles when the application runs. This article focuses on runtime CSS-in-JS, a category which includes both styled-components and Emotion. While I have only used Emotion, I believe virtually all points in this article apply to styled-components as well. Styled-components and Emotion are the most popular CSS-in-JS libraries in the React community. Enter fullscreen mode Exit fullscreen mode

Css for js