What Are the Main Performance Issues with CSS-in-JS?

Runtime styled-components tend to tank performance, especially with apps that have a lot of dynamic theming. Each re-render recalculates styles, which really slows things down. Switching to CSS modules or even Tailwind has been a game changer for performance since those are compiled at build time.

I think many people dismiss CSS-in-JS too quickly. Sure, it has its downsides, but it's got advantages too. Like type safety and scoped styles. It just depends on how you implement it. I’ve used it for years without any of the import order problems mentioned here.

The performance hit usually comes from the runtime nature of CSS-in-JS libraries. They inject CSS during render, which increases JS work before the layout can paint. If you're generating styles on the fly, that can be costly in terms of performance, especially in large apps. Compile-time solutions can alleviate most of these concerns.

When you refactor your JavaScript, it can unpredictably break your CSS. That’s because the order in which your CSS gets built is determined by the order of your JS imports. So if you change something and that order changes, your styles can apply differently. This is a huge problem for maintainability and just feels messy.

One big downside I’ve noticed is with client-side rendering. If your CSS isn't bundled in an actual CSS file, the styles can’t render until the JavaScript has loaded and executed. This really adds to latency, making the experience feel sluggish especially on slower devices.