CSS vs CSS-in-JS Performance

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…