CSS-in-JS is dying


Recently one of the core developers working on emotion, one of the most popular CSS-in-JS libraries, admitted that the company no longer uses it.

One of the symptoms of the issues that emotion has been facing recently is the lack of streamable SSR support employed by frameworks such as NextJS and Remix. This is because the CSS classes and styles are created on render which adds additional layers of complexity to the component tree as well as increasing bundle size as well as adding extra performance overhead.

Having used a few UI Component frameworks based on CSS-in-JS I could honestly say that it would probably be for the best as CSS-in-JS tends to confuse logic and styling.

Many people might panic and say, "Does that mean I can't use component frameworks?". No, instead I would suggest using Tailwind in combination with a UI behaviour library that doesn't handle styling like react-aria or Radix UI which exposes only primitive components.

This means that you can still apply your own styling whilst preserving the baked-in functionality that a lot of React component libraries have baked in.

Another approach to this problem is to use something like Daisy UI which is built on top of the TailwindCSS. This means that your styling only needs to be generated once, on build and only the necessary styles are included, therefore lowering bundle size.