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.