CSS vs CSS-in-JS Performance

3 min readNov 21, 2022

Time to face the brutal truth

Ever wanted to redo CSS all over again, but with a new tool/framework?

What is it?

`styled-components` is a CSS-in-JS styling framework that uses tagged template literals in JavaScript and the power of CSS to provide a platform that allows you to write actual CSS to style react components, while being boasted about its developer experience (also known as DX) and performance.

But is the hype well-deserved or are developers being led astray?

Let’s get the first thing out of the way.

You basically write CSS, but in Javascript. You can actually name your tags so it’s easier to identify them. Just for that, this tool is an automatic 10/10 for most React developers (myself included).

You can also change the values of properties with Javascript. This is great for apps with dynamic content.

So then why not use styled-components for all projects?

The question I want to pose, would people still use it if they knew they are leaving 30% or more money on the table? No, they wouldn’t care about it at all.

But in certain cases, it does affect the revenue of your app. One thing I learned during my time creating web apps for phones is that NOT all people (surprinsingly) use the latest iPhone. There are still people who use devices with Android 4.4.4. I know, unbelievable!!!

So before you create your new project with this technology (or before you change the current one in production), take a minute and consider how important is performance to your app.

I couldn’t really find on the internet an article which talked about this, but it made sense to test the hypothesis that modular CSS may be more performant. So I spent a few days and switched the entire codebase of an in production app from styled-components to modular CSS.