7 feature-rich alternatives to styled-components

We have seen CSS-in-JS become an essential part of modern frontend development in the past few years. According to styled-components creator Max Stoiber, around 60 percent of React installs also install a CSS-in-JS library. The adventure that began with JSS in November 2014 is now relatively stable, with styled-components acquiring a large chunk of the CSS-in-JS market.

Here, we will be sharing some cool alternatives to styled-components that provide great value and could become the CSS-in-JS library for your next app.

Linaria: Zero-runtime CSS-in-JS library

One of the drawbacks of CSS-in-JS libraries is the runtime cost, as most of them add and remove styles from the <style> tag when DOM elements are changed.

Linaria solves this issue by extracting all CSS in files during the build. Another fabulous feature is that all dynamic styles are applied using CSS variables, which lead to total independence from any runtime.

That does come at a cost, however — dynamic styling is not available in browsers that don’t support CSS variables. Linaria also supports Sass-like syntax for nested styles.

As for developer experience, it supports stylelint and also provides a CSS source map for a seamless debugging experience. It also has a Babel loader with a webpack guide, a Rollup plugin, and Gatsby, Svelte, and Preact guides.

If you’re planning to move from styled-components, Linaria has a styled helper, making it easy to switch. linaria/react also supports dynamic styles with a styled-components-like syntax.

CSS Blocks by LinkedIn

One of the core challenges for styling libraries today to find the best tradeoff between performance and maintainability. CSS Blocks envisions to give the best of both. CSS Blocks is inspired by CSS Modules, BEM, and Atomic CSS.

Best of all, CSS Blocks is statically analyzable. It can look at your codebase and analyze which parts of your CSS are used, unused, or conditionally used. It divides all of the rules in CSS into unique groups without repetitions. It allows you to keep your CSS more maintainable for yourself and other developers and better optimized for your end users.

CSS Blocks offers a new model as compared to styled-components or similar styling libraries. Some teams may take some time to learn and adapt to it, but the performance and maintainability gains make it worthwhile.

Stitches: Near-zero runtime and best-in-class developer experience

Its maintainers describe Stitches as a styling library with near-zero runtime, server-side rendering, multi-variant support, and best-in-class developer experience. As compared to Linaria and CSS Blocks, Stitches is closer to styled-components when it comes to architecture. With a smaller size than styled-components, it provides much of the same functionality with a similar API.

The best part of Stitches is variants, which help in developing better component APIs. You can define styles for each variant and also combine them. It also uses CSS variables for theming; this allows it to avoid runtime props interpolation, providing a decent performance boost compared to other styling libraries available.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Another beautiful feature is tokens, which enable you to declare variables and use them as CSS values — yes, even in shorthand. Also, the switch from styled-components is relatively seamless as their APIs are quite similar.

Styletron: Universal toolkit for component-oriented styling

Developing libraries and components that work well with any UI library or framework is something that all frontend devs look for today. Styletron, being library-agnostic, allows you to write components that work well with any UI library, be it React or any other.

Styletron is good for both Atomic CSS and critical rendering paths. It adds only required CSS to style tags and performs declaration-level de-duplication, which reduces the size of CSS that the browser has to process. You get all this in a tiny, 8KB gzipped library. As for developer experience, it doesn’t require any bundler configurations or tooling setup.

Emotion: The next generation of CSS-in-JS

Emotion has been around for a while now and pioneered many ideas that other styling libraries have since adopted. It is framework-agnostic and also has a style API to create React components with styles attached to them.

Emotion provides a great developer experience because of its source map support. It comes with an out-of-the-box theming mechanism, ESLint plugins, and support for CSS props.

In short, Emotion has everything that styled-components offers — with a slightly smaller bundle size, to boot — so you can swap styled-components with Emotion with minimal effort.

Fela: Style as a function of state

Fela is based on a unique principle: if the view is a function of the state, your CSS should be, too, because it’s part of your view. Just like React and Redux, Fela doesn’t explicitly tell you how to write your styles; it comes with a powerful API that helps you build your styling environment.

Fela considers dynamic styling its core, and it is built to be framework-agnostic. It also adopts the Atomic CSS principle as every rule is given a unique class, making your CSS smaller and more performant.

As for its API and switching from styled-components, Fela has a different mental model and a very different API. It might take a little time to catch up on the pace, but it’s unique and has great benefit for apps that have a lot of dynamic styles.

Goober: A CSS-in-JS solution at less than 1KB

Goober is a lesser-known library built with the motivation to avoid the bundle size impact of styled-components (~12KB) and Emotion (~11KB). Goober claims to have all the goods offered by styled-components.

From a performance perspective, Goober can beat out styled-components. But when benchmarked for SSR, it was slightly behind Emotion. As for its features, almost all of the most widely used features of styled-components are available with Goober.

Its API is quite similar to styled-components’, and as the mental model remains the same, it shouldn’t be much of a hassle to move from styled-components to Goober.

Wrapping it all up

CSS-in-JS has provided a way for developers to maintain app styles with little hassle and solved many of the issues associated with bare CSS. As we move forward, the amazing frontend community, along with various tech giants, are now building scalable and more performant solutions based on the learnings we got from styled-components.

I appreciate people who are putting in the effort to maintain all of this cool stuff. All of them have their unique pros and cons, and each can be handy in certain scenarios. If you’re looking for more, have a look at some other CSS-in-JS libraries here, as compared by Michele Bertoli.