For three years, I have styled my web apps without any .css files. Instead, I have written all the CSS in JavaScript.

I know what you are thinking: “why would anybody write CSS in JavaScript?!” Let me explain.

What Does CSS-in-JS Look Like?

Developers have created different flavors of CSS-in-JS. The most popular to date, with over 30,000 stars on GitHub, is a library I co-created, called styled-components.

Using it with React looks like this:

import styled from 'styled-components'

const Title = styled.h1`
  color: palevioletred;
  font-size: 18px;
`

const App = () => <Title>Hello World!</Title>

This renders a palevioletred

with a font size of 18px to the DOM:

Hello World!

Why I like CSS-in-JS

Primarily, CSS-in-JS boosts my confidence. I can add, change and delete CSS without any unexpected consequences. My changes to the styling of a component will not affect anything else. If I delete a component, I delete its CSS too. No more append-only stylesheets! ✨

Teams I have been a member of are especially benefitting from this confidence boost. I cannot expect all team members, particularly juniors, to have an encyclopedic understanding of CSS. On top of that, deadlines can get in the way of quality.

With CSS-in-JS, we automatically sidestep common CSS frustrations such as class name collisions and specificity wars. This keeps our codebase clean and lets us move quicker. 😍

Regarding performance, CSS-in-JS libraries keep track of the components I use on a page and only inject their styles into the DOM. While my .js bundles are slightly heavier, my users download the smallest possible CSS payload and avoid extra network requests for .css files.

This leads to a marginally slower time to interactive, but a much quicker first meaningful paint! 🏎💨

I can also easily adjust the styles of my components based on different states (variant="primary" vs variant="secondary") or a global theme. The component will apply the correct styles automatically when I dynamically change that context. 💅

CSS-in-JS still offers all the important features of CSS preprocessors. All libraries support auto-prefixing, and JavaScript offers most other features like mixins (functions) and variables natively.

I know what you are thinking: “Max, you can also get these benefits with other tools or strict processes or extensive training. What makes CSS-in-JS special?”

CSS-in-JS combines all these benefits into one handy package and enforces them. It guides me to the pit of success: doing the right thing is easy, and doing the wrong thing is hard (or even impossible).

Who Uses CSS-in-JS?

Thousands of companies use CSS-in-JS in production, including Reddit, Patreon, Target, Atlassian, Vogue, GitHub, Coinbase, and many more. (including this website)

Is CSS-in-JS For You?

If you are using a JavaScript framework to build a web app with components, CSS-in-JS is probably a good fit. Especially if you are part of a team where everybody understands basic JavaScript.

If you are not sure how to get started, I would recommend trying it out and seeing for yourself how good it feels! ✌️