Real-world CSS vs. CSS-in-JS performance comparison

1. styled-components

   1 243 40,816 7.0 TypeScript

   Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

   

   - Dynamic control over style. Basically your stylesheet is JS function returning style. You can do anything here. See this https://github.com/styled-components/styled-components/issue...

2. InfluxDB

   www.influxdata.com featured

   InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

   

3. emotion

   2 55 17,787 7.6 JavaScript

   👩‍🎤 CSS-in-JS library designed for high performance style composition

   

4. classnames

   3 96 17,746 8.3 JavaScript

   A simple javascript utility for conditionally joining classNames together

   

   Added one more point on API side. Also, you'll probably end up using one more library called classname for better classname management.

   https://www.npmjs.com/package/classnames

   In the end, I generally prefer to use tailwind + emotion. My goals usually is to save time and make system more consistent rather than optimizing JS bundle, etc.

5. clsx

   4 22 9,111 5.8 JavaScript

   A tiny (239B) utility for constructing `className` strings conditionally.

   

6. twstyled

   5 1 45 0.0 TypeScript

   ⚡ Blazing fast full-featured Tailwind CSS + CSS in JS Compiler

   

   We have a "write tachyons/tailwinds CSS-in-TypeScript" project [1] that can sit on top of any CSS-in-JS runtime (emotion and fela are both supported).

   I'm hoping to eventually find one of these build-time CSS-in-JS frameworks that is smart enough to partially eval ~80% of our `

   ` expressions to be zero runtime.

   And, if/when this happens, do this as a seamless upgrade to our existing codebases, i.e. without any lines of `css={Css.m4.black.$}` in our app need to change.

   Basically we're using our Truss DSL both for atomic/utility class names today + a decoupling layer to switch CSS-in-JS libs in the future if/when needed.

   I think Linaria and https://github.com/twstyled/twstyled (based on/forked from Linaria) are the closest to doing this eval during compilation, but haven't had to dig in so far (runtime emotion has been fast enough for us so far).

   [1]: https://github.com/homebound-team/truss/

7. personal_web

   6 1 16 7.0 JavaScript

   Source code of my personal website: https://pustelto.com

   

   or you can read the source markdown here:

   https://github.com/Pustelto/personal_web/blob/master/src/blo...

8. css-modules-typescript-loader

   7 2 198 0.0 JavaScript

   Webpack loader to create TypeScript declarations for CSS Modules

   

9. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

10. webpack-react-typescript

    8 1 1 0.0 JavaScript

    

11. chakra-ui

    9 356 39,218 9.9 TypeScript

    Chakra UI is a component system for building SaaS products with speed ⚡️

    

    CSS-in-JS alone doesn't give you many tools for that kind of stuff, but if you use something that integrates more design system-style theming it's pretty easy - have a look at https://chakra-ui.com/ and click on the moon icon in the top corner for instant dark mode. Implementing various themes for high-contrast etc. would just be a case of changing the theme.

Suggest a related project