Published February 18th, 2019
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.
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 <h1> with a font size of 18px to the DOM:
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! ✨
Confidence: Add, change and delete CSS without any unexpected consequences and avoid dead code.
Painless Maintenance: Never go on a hunt for CSS affecting your components ever again.
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. 😍
Enhanced Teamwork: Avoid common CSS frustrations to keep a neat codebase and moving quickly, regardless of experience levels.
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! 🏎💨
Fast Performance: Send only the critical CSS to the user for a rapid first 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. 💅
Dynamic Styling: Simply style your components with a global theme or based on different states.
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).
Thousands of companies use CSS-in-JS in production, including Reddit, Patreon, Target, Atlassian, Vogue, GitHub, Coinbase, and many more. (including this website)
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! ✌️