Top CSS-In-JS libraries, Compared
Tags: css, javascript, react
Published: 2023-02-28 23:09:10

of course, this is in no way a full showcase of each library and its features, but a more high-level understanding of the syntax and big features

**all 4 libraries are good in their own way, and some work in certain situations better than others (in my opinion of course 😉):**

* use `emotion` instead of `styled-components`, use it to isolate your styling from your logic, works well on small and medium projects, and *larger projects with proper config*
    
* use `twin.macro` if you love tailwind and want to **detach the inline styling** from your components
    
* use `stitches` for making a typesafe and scalable design system, 
works well on medium to large projects 
 (can't recommend it since it's not maintained anymore)
    

***stick around if you want a more in-depth walkthrough on these libraries and how you'd be using them!***

### [Styled-Components](https://styled-components.com/)

SC is [the most popular CSS-in-JS library](https://npmtrends.com/@emotion/react-vs-@stitches/react-vs-styled-components-vs-twin.macro) here, and for good reasons, it makes it easy to build reusable styled elements (without naming collisions) and extend each element to add other variants of that element, making it super easy to build up a Design system,


![styled-components syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7hp1tg4jkx9ejq1ef0d.jpg)

you can also add the CSS only without making a new component for it!


![styled-components with css prop syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od4kj6xisfcpc8mbkr3f.png)

it keeps the components readable and detached from the logic of the app


![isolated component and styling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1729eaoeg520s91flgm.png)

and it allows for dynamic styling based on the component's props and state!


![animation for updating the button color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywt072u6cn9xcg3qe5xp.gif)

* Pros
    

Framework Agnostic - supported in a lot of other libraries - Ease of use

* Cons
    

Naming components is hard 🙄 - Performance (compared to Emotion)- Debugging

---

### [Emotion](https://emotion.sh/docs/introduction)

`Emotion` is heavily inspired by `styled-components` and It has almost the same features of styled-components, the syntax is identical too


![emotion syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7qpxqbdjdc4ohfq9lmn.png)

aside from some differences in using the `CSS` prop, and being much more performant with a smaller bundle size


![emotion css prop syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9oe3pha7h5yhrmmpxicu.png)

* Pros
    

Same as `styled-components` - Performance is better - smaller bundle size than `styled-components`

* Cons
    

Naming components (again) 😅- Debugging - Community support isn’t as large as `styled-components`

---

### [Stitches](https://stitches.dev/)

this is where it gets interesting, `stitches` has a smaller bundle size than `emotion`, and has a near-zero runtime 🤯, the biggest difference here is that `stitches` uses Object style syntax to achieve that zero runtime


![stitches syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1y09aj2yd3ye713i6jt.png)

`Stitches` doesn’t have **Prop Interpolation,** but has a Variants concept that’s more flexible and cleaner compared to `styled-components`/`emotion`


![emotion and styled-components vs stitches syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3siwq1zi7jysymvx4aq2.png)

another great feature is that `stitches` is built with Typescript in mind, so it’s type-safe and you’ll have autocompletion with it too!

UI components like [Radix](https://www.radix-ui.com/)  and [NextUI](https://nextui.org/) use it under the hood (although NextUI is transitioning to something else as of the time of this writing since `stitches` is no longer maintainable)


* Pros
    

Performance - type-safety - zero runtime - Bundle size

* Cons
    

Can be overwhelming for small projects - transitioning from Emotion or SC can seem overwhelming - **no longer maintained as of the time of this writing (it doesn't support static extraction yet)** - community support isn’t as large as the rest

---

### [twin.macro](https://github.com/ben-rogerson/twin.macro)

*✨the magic of tailwind with the flexibility of CSS-in-JS ✨*

who doesn’t love tailwind these days ? it’s a great solution for css but it can muddy your code quickly, and that’s a turn off for some people, but with `twin.macro`, you’ll be using tailwind syntax instead of normal css

![twin.macro syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyzzgblqziodw9dkl692.png)

(it’s a babel macro basically, so doesn’t add any additional size), twin macro can be added to the previous 3 CSS-in-JS libs, and you can use normal css too for stuff that tailwind doesn’t support yet (like with grid, animation etc..)


![twin.macro used with the previous libraries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaihg3w26w6c7yxpjrgw.png)

(the issue with it was that it used a babel macro, and that turns off SWC in Next.js, but [they’ve fixed the issue now](https://github.com/ben-rogerson/twin.examples/tree/master/next-stitches-typescript) !)

* Pros
    

Tailwind syntax 🥳 - supports most CSS-in-JS libraries - and takes any pros from the library you chose to inject it in ;)

* Cons
    

Can be a bit overwhelming to setup (mainly for next.js & stitches)- and takes the cons from the library you chose

---

and with that we've taken a look at these 4 libraries and how they compare to one another, hope you guys like this one, it's my first one and i've had a blast animating this, next time i'll touch on the new ways to create-react-app

if you have any questions just let me know, and follow me on [twitter](https://twitter.com/haidar_ezio) for more updates and minified version of these articles ;)