The Pros and Cons of CSS in JS

06/07/2020

CSS-in-JS, or CSS inside Javascript files, has been one of the most popular methods of front-end development over the last few years. With the rise of front-end frameworks, static site generators, and Javascript in general, it’s hardnotto use CSS-in-JS.

But should you use it?

JSS certainly has it’s benefits, but there are also drawbacks as well. Today, we’ll be covering some of the best, and worst things, about JSS, so you can decide what to use in your next project, and why.

!Separation of logic

One of the main benefits of CSS-in-JS is the fact that it does NOT follow the separation of logic. Since we write our styles inside of our Javascript files, these styles can only be applied to that component. It’s a lot easier to find the styles for a particular component than regular CSS because the styles are inside the same file the rest of the component is in.

This also (mostly) eliminates globals in CSS, which can cause many issues with specificity. Again, since our styles are inside each JS file, we don’t have to worry about specificity 🎉

Variable Styling

CSS-in-JS makes it easy to update styles based on state, props, or other actions on the webpage. Because the styles are defined right in the file, you can pass variables to your styles. This is done differently depending on what you use, but it’s ultimately easier thandocument.getElementById('element').classList.add('class')'.

Performance

CSS-in-JS is an awesome thing to use if you’re focused on performance. Because of its component-based styling, each page on your website only loads those styles that it needs. CSS, on the other hand, loads the entire CSS file, unless you do some fancy code-splitting. And by that point, you’re probably using CSS-in-JS.

This may not make much of a difference for a small website, but it definitely will help for a larger website with a lot of CSS.


Now, if this was everything you needed to know about CSS-in-JS, you’d be jumping off your seat to go and try it.

However, there are still some downsides to CSS-in-JS. They aren’t as prominent as the upsides, but they’re still important in deciding what to use.

No ESLint or Syntax Highlighting

This one sucks quite a bit. It’s made me question ever using CSS-in-JS again.

By using CSS-in-JS, you’re telling all your favorite CSS tools that you’re leaving them for someone else.

Because, once again, of the fact that CSS-in-JS is separated into each JS file, your CSS is out of place. Linters and syntax highlighters are scanning aJavascriptfile, not a CSS file. As a result, you’ll most likely forget a semi-colon in your CSS, and your app won’t like it at all.

Design System

If you’ve got a large or even medium-sized website, you’ll probably want to use a design system. A design system is just a set of rules that define stuff like colors, spacing, borders, box-shadows, and other styles for your app. The main goal of using a design system is to create aconsistent look and feelfor your website.

However, using CSS-in-JS can make it a little harder (but not impossible) to style your site consistently. With CSS, you just define a class for the set styles, and use it everywhere you want for a consistent style.

.box-shadow-2 {  box-shadow: 2px 2px 5px 0px #f7f7f7; }
<button class="box-shadow-2">Button</button>

Whereas with CSS-in-JS, you’ll have to rely on something a little more complex, like theming with Styled Components or something similar. It’s not quite as easy, but it still gets the job done.

And that’s it! These are the most notable pros and cons of using CSS-in-JS.

Thanks for reading! If you liked this article, you can check me out onTwitter, or mywebsite!

p.s For those of you wondering, the official reading time for this article is 3 minutes and 6 seconds ⏳.