Is CSS-in-JS really better than traditional CSS?

CSS in JS is a real ‘hotness’ and in many ways is very much a ‘thing’ nowadays when it comes to building applications on the web. I decided to test my ‘traditionalist’ sentiments with CSS and take on an experiment. I went in with an open mind to truly answer the question… is it really better than CSS?

I was pretty convinced I knew what was going to be the outcome. I have always had an eye on CSS in JS however never really got around to fully forming an opinion on it. Being a ‘traditionalist’ I am very beholdent to CSS standing on its own and Javascript having its own space and styling components wasn’t one of them.

As a bit of background, early on in my career I was in your classic ‘web agency’ operation. Building websites for businesses. Javascript at that time was effectively JQuery, and anything stylistic with Javascript was a right pain. So, lets just say, those years were formative in me taking an anti-stylistic approach to Javascript.

I since moved to the product space building large scale applications with a tonne of logic and scaling complexity and really embedded myself in the ‘React’ world, but still leant on CSS as a styling mechanism.

In recent events, I was exposed to styled-components on a production product and was intrigued by its function. I saw first hand its…