CSS in JS : Don’t use runtime CSS-in-JS if you care about the load performance of your site
Real-world CSS vs. CSS-in-JS performance comparison
Real-world CSS vs. CSS-in-JS performance comparison
I took the real app and convert it from Styled Components to Linaria to compare the app performance of CSS-in-JS and normal CSS. Continue reading if you want to know how it went.
pustelto.com
Don’t use runtime CSS-in-JS if you care about the load performance of your site. Simply less JS = Faster Site. There isn’t much we can do about it. But if you want to see some numbers, continue reading.
That’s it. As you can see runtime CSS-in-JS can have a noticeable impact on your webpage. Mainly for low-end devices and regions with a slower internet connection or more expensive data. So maybe we should think better about what and how we use our tooling. Great developer experience shouldn’t come at the expense of the user experience.
Use good old CSS or use some build-time CSS-in-JS alternative 📌to get my styles out of JS bundles.
I think build-time CSS-in-JS libs📌 will be the next big thing in the CSS ecosystem as more and more libs are coming out (the last one being vanilla-extract from Seek). And big companies are heading this way as well, like Facebook with their styling lib).