Now here’s an interesting article: Why We’re Breaking Up with CSS-in-JS. 

I took to Twitter to spew out some thoughts, so I thought I’d capture them here.

I’m fortunate in that I get to duck my head into a lot of companies, and get to witness all manner of cultures and technical executions. Decisions like “do we adopt CSS-in-JS or not?” are not primarily technical decisions, but cultural ones.

Zeitgeist is a wild thing, and we’re all influenced by it. In my work, I often get to see what happens after the zeitgeist has moved on and the people that took the bait are left with the consequences of those decisions.

I want to be clear about this: there’s absolutely no “Hahaha I told you so! What a bunch of idiots!” sentiment in here at all. As I said before, we’re all subject to the fashion of the day, even if we like to pretend we aren’t.

We all need to choose tools and technologies in the snapshot in time we live in. This is why it’s so critical to make those decisions with a strong set of values and principles that undergird all of those other decisions. I talk about that here.

Again we’re all subjected to the zeitgeist of the day. I’m from the Zeldman school of web standards and progressive enhancement. When React came on the scene, the air was thick with “progressive enhancement is dead; SPAs all the way.” Create React App embodied that sentiment. At first, I bristled at it. But the momentum was strong, and hey, after all I got bills to pay. So I tabled my principles about progressive enhancement and learned React.

And then! All these years later, the React community came around and realized, uh, sending HTML instead of a 4MB ball of JavaScript is a good thing. I don’t know how much “whoops our bad” was involved, but in any case, the zeitgeist shifted to “SSR all the things!”

Now, I wasn’t the only one who set aside my progressive enhancement principles. Around the time of the SPA zeitgeist, web components were born. I don’t know the specifics of the history, but there were different, competing approaches to web components at the beginning. The JS-centric zeitgeist version won, which is why we don’t have HTML imports and web component custom elements rely on JavaScript in order to work. But here’s the funny thing: the zeitgeist has shifted back to sending HTML (call it SSR, call it HTML-first, or whatever).

So now the world of web components has egg on its face because the zeitgeist at the time of its design didn’t have such a strong focus on SSR/HTML-first/ progressive enhancement. Had web components been designed in the current zeitgeist, things would almost certainly be different.

The irony is that a lot of the same React voices who used to be the ones shouting that progressive enhancement is dead are the same ones tut-tutting web components for having a JavaScript dependency.
But I’m worrying I’m getting a little too in-the-weeds here. The point isn’t about CSS-in-JS, web components, React, or any of that. The thing I want to highlight is that we humans are social creatures who are strongly influenced by our culture(s) and zeitgeist of the time.
So how do we address this? I don’t think we can ever fully offset our bias and see things objectively. But I think it’s helpful to take the time to contemplate and establish a set of principles to guide us — at an individual, cultural, and societal level.
I occasionally dream of a political landscape where competing groups come together in good faith to arrive at a set of guiding principles that everyone agrees and adheres to. It would all be so much more constructive. But of course that will have to remain a dream.