7 Feature-rich Alternatives to Styled-components

7 Feature-rich Alternatives to Styled-components

Styled-components has been at the forefront of CSS-in-JS for years, but it's worth exploring today's new, feature-rich alternatives: Linaria, CSS Blocks by LinkedIn, Stitches, Styletron, Emotion, Fela, Goober

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.

  1. Linaria: Zero-runtime CSS-in-JS library
  2. CSS Blocks by LinkedIn
  3. Stitches: Near-zero runtime and best-in-class developer experience
  4. Styletron: Universal toolkit for component-oriented styling
  5. Emotion: The next generation of CSS-in-JS
  6. Fela: Style as a function of state
  7. Goober: A CSS-in-JS solution at less than 1KB

Linaria: Zero-runtime CSS-in-JS library

Linaria Logo

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

CSS Blocks Logo

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

Stitches Logo

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

Styletron Logo

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

How To Write Better Code As A Web Developer - React

Look at three different React code examples from a beginner, intermediate, and advanced web developer. How senior developers think. How to use React state properly. How to use React useEffect properly. What to think about when programming. The differences between senior and junior developers

How to Become A React JavaScript Developer 🚀

Today Qazi & Sonny will be showing you How To Become a React JavaScript Developer 🚀👨‍💻

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...