Css attributes

Comparative study of 11 CSS-in-JS libraries

Andrei Pfeiffer recently presented the results of a comparative study of 11 CSS-in-JS libraries. In his talk at React Finland 2021, Pfeiffer focused on the distinction between static and runtime CSS-in-JS libraries and explained in more detail how each category and browser caching relates to performance.

Pfeiffer explained the motivation behind the two-month study as follows:

The reason I did this analysis: I wanted to explore a safe way to write CSS. I use TypeScript in most of my application code in order to write business logic and components. I get all the benefits of type security for the rest of the code, but the CSS part and the style part are not natively secure. I was particularly looking for libraries that support server-side rendering and can easily integrate with Next.js with of course full TypeScript support.

After reviewing over 50 CSS-in-JS libraries, the study focused on 11 CSS-in-JS libraries that met the study criteria. In his talk at React Finland 2021, Pfeiffer focused on a specific aspect of the comparison that impacts the perceived performance of the app. This aspect concerns the fact that the library generates static CSS files; or instead choose to update styles at run time – by injecting CSS rules into a document or by updating the styling of DOM elements.

While the full study compares CSS-in-JS libraries on 16 criteria, Pfeiffer explained the importance of the CSS-in-JS static / runtime dichotomy as follows:

Understand how these features affect Essential elements of the web and Performance indicators [performance KPIs tracked by Google and which may impact search ranking results] in general, is an extremely important factor to consider, and the way the styles are delivered to the customer probably has the biggest impact.

The static CSS category includes CSS Modules, Linaria and vanilla extract (successor of To treat, launched this year). CSS Runtime category includes Stylized JSX (maintained by Vercel, creator of Next.js), Stylized components, Emotion, TypeStyle, Fela, stitches (maintained by Modulz and launched last year), JSS (a very mature solution published in 2014), Goober, and Compiled (maintained by Atlassian, released last year).

Pfeiffer pointed out in the talk that the comparative performance profile of static CSS-in-JS libraries depends on at least two important factors: the speed of the network to which the user device is connected and the content of the browser cache.

Download times will show little variation between user devices over fast Wi-Fi connections. the next slide (excerpt from Pfeiffer’s talk) shows that conversely, devices on a slow connection will be impacted to a greater degree by the size of the files to download:

Pfeiffer argued that when the browser cache is empty, static CSS-in-JS libraries like Linaria will typically have a higher First Paint (FP) performance metric. The first paint is the time between navigation and when the browser displays the first pixels on the screen, making anything visually different from what was on the screen before navigation. Lower PFs positively correlate with better user experience.

First Paint (performance metrics promoted by Google) is generally worse for static CSS-in-JS libraries when the browser cache is empty

Conversely, during subsequent downloads, when the browser cache already has the files necessary to display the expected application screen, static CSS-in-JS library may lead to a drop in PF, that is, perhaps resulting in a better user experience:

First Paint (performance metrics promoted by Google) is generally better for static CSS-in-JS libraries when the browser cache is full

Pfeiffer’s study compares 11 CSS-in-JS libraries on 16 criteria that cover both user experience (e.g. page size delta, static CSS extraction, theme), developer experience (e.g. TypeScript support, IDE support, CSS-like DSLs) and component support (e.g. extended CSS, atomic CSS, inline style customization components). The full study and its detailed comparisons and conclusions accessible on GitHub.

StyleX, facebook.comCSS-in-JS library, also showcased at React Finland 2021, falls under the static CSS-in-JS category. Some of the libraries studied are independent of the framework. Others complement front-end UI frameworks that leverage HTML-in-JS, for example via JSX.

Developers are encouraged to refer to the full speech presented at React Finland 2021. The talk contained additional technical explanations and illustrations that further cover the subject of the talk. React Finland 2021 took place online between August 30 and September 3.