Styled-components has been at the forefront of CSS-in-JS for years, but it’s worth exploring today’s new, feature-rich alternatives.
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
- CSS Blocks by LinkedIn
- Stitches: Near-zero runtime and best-in-class developer experience
- Styletron: Universal toolkit for component-oriented styling
- Emotion: The next generation of CSS-in-JS
- Fela: Style as a function of state
- Goober: A CSS-in-JS solution at less than 1KB
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.
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.
#react #javascript #programming #web-development #css
