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

• styled-components

  222 40,061 8.7 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...

• emotion

  52 17,175 5.9 JavaScript

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

  

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• classnames

  94 17,349 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.

• clsx

  17 7,330 6.4 JavaScript

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

• twstyled

  1 46 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/

• personal_web

  1 13 4.2 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...

• css-modules-typescript-loader

  2 198 0.0 JavaScript

  Webpack loader to create TypeScript declarations for CSS Modules

  

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• webpack-react-typescript

  1 1 0.0 JavaScript

• chakra-ui

  344 36,514 9.0 MDX

  ⚡️ Simple, Modular & Accessible UI Components for your React Applications

  

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