What You Need to Know About CSS-in-JS for 2021

In this post we'll see an overview of CSS-in-JS frameworks that are the most in-demand in the developer community this year.

Introduction

A few years ago, component-based JavaScript frameworks were the hottest thing in the web developer community, especially among frontend developers. CSS-in-JS is a newer way to look at styling these components with JavaScript inside the components themselves. CSS on its own has a few limitations that we will not get into in this article, including the way it is cascading in nature, the lack of dynamic functionality and even scoping.

Imagine that you write your styles in JavaScript or TypeScript inside your React, Angular or Vue component. That is exactly what CSS-in-JS offers. It relies on JavaScript module implementation, seeing as CSS does not have modules, and it ensures a scope follows styling rules. CSS on its own has no scoping mechanisms, so this approach solves for that.

“For three years, I have styled my web apps without any .css files. Instead, I have written all the CSS in JavaScript. … 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!” — Max Stoiber

There are a few CSS-in-JS frameworks available for use, and we will see an overview of some of the most in-demand ones.

CSS Modules

With over 14,000 stars on GitHub, CSS Modules is one of the most demanded CSS-in-JS frameworks, with a very different approach to it. CSS Modules basically lets you scope all style rules you write locally by default in the build process. You know how you have a markup file and then a CSS file in a simple web app like this:

<h3 class="looks">5th heading goes here </h3>

and in the CSS file you have something like this:

.looks {
  font-size: 18px;
}

The font size of that h3 element will always be 18px and anything else that gets the class of looks will also always have that font size.

With CSS Modules, you write the markup in a JavaScript file instead, and then the style will be picked up on build and scoped to exactly where it is needed—in our example the h3 element.

import styles from "./styles.css";
element.innerHTML =
  `<h3 class="${styles.looks}">
    5th heading goes here
  </h3>`;

The module would just parse the stylesheet and find where looks was defined, pick the value and output an HTML and CSS file with unique identifiers and classes like this:

<h3 class="_styles_looks_001">
  5th heading goes here
</h3>

The stylesheet the module will generate would look something like this:

._styles_looks_001 {
  font-size: 18px;
}

It has gathered a lot of interest and it has one of the highest adoption rates of any CSS-in-JS framework that currently exists.

Styled-Components

Styled-components, which has been starred over 32,000 times on GitHub, is a way of writing CSS-in-JS in plain CSS inside your components without having to bother if the class names will affect other elements or component. Styled components are scoped to one component and do not affect any other component or element in your project.

This is achieved by injecting styles automatically to components with the least amount of code. All styled components have their own unique class names, so you never have to worry about using a class twice. It is also a great way to get rid of unused styles—if styles are scoped to components, as a component is deleted, the corresponding scoped style is deleted also. You can imagine how easy it is to maintain a setup like this, all this without a new learning curve.

To get started, install styled-components using the node package manager like so:

npm install --save styled-components

In package.json add this:

{
"resolutions": {
"styled-components": "^5"
}
}

Emotion

Emotion, with over 12,000 stars on GitHub, is a framework-agnostic CSS-in-JS framework just like styled-components. With Emotion you can style apps with object styles or strings. It makes use of source maps and labels, and a great documentation too that I personally love. You can even test utilities with Emotion, and their style composition is cool.

To get started with Emotion, you can either use the React setup instructions which just involves installation with npm like this:

npm i @emotion/react

The “@emotion/react” package requires React and is recommended for users of that framework if possible.

Or, if you do not use React, you can install this package instead:

npm i @emotion/css

Emotion needs no additional setup, babel plugin or other config changes. It also has support for auto vendor-prefixing, nested selectors and media queries.

Styled System

With over 6,000 stars on GitHub, Styled System is self-acclaimed as the home of style properties for rapid UI development that gives you total control of component styles through a global theme object.

With Styled System, you can build expressive and consistent UI components with style properties that pick up values from global themes. This is called responsive values. It is inspired by constraint-based design system principles and supports any color palette.

The best thing about Styled System is that it works with all other CSS-in-JS libraries, including Emotion and styled-components. Getting started with Styled System, you have to install another CSS-in-JS library such as styled-components or Emotion.

npm i styled-system styled-components

To create a component that uses Styled System functions, you bring in the function of choice with an import statement. For instance, a color function can be used like this:

import styled from 'styled-components'
import { color } from 'styled-system'
const Box = styled.div`
  ${color}
`
export default Box

This means that this component defined will have both the color style property and the background color style property.

<Box color="#fff" bg="tomato">
  Tomato
</Box>

Why State of CSS?

This list of frameworks was sourced from the State of CSS survey results, which you can find here.

The State of CSS report is a comprehensive report of how over 11,492 developers from 102 countries around the world feel CSS has performed over the last 12 months. Data is obtained by surveying these people, and the creators then creatively visualize the survey results and even add cool animations to make it a fun report. The survey looks into things like unit and selectors, tools, environments, frameworks and everything else, including general opinions that concern CSS.

Conclusion

This post is an overview of a few CSS-in-JS frameworks that are in demand among UI developers in the last year. We took a look at some of them, how they are different and what exact features they have that make them stand out. We also saw how to get started using these tools. Which of them is your favorite?