Three other observations I’ve noticed as I encounter CSS-in-JS in my consulting clients’ work and other projects I come across:
- Lack of portability: So much of my work involves helping gigantic organizations create and deploy design systems to a vast array of tech stacks. Even if CSS-in-JS is a more powerful, elegant solution, it only works for JS-driven environments. So what happens if an organization has some React projects in play, but also has some Drupal, WordPress, or [anything else] projects they need to unify under the same design system? Do they have to re-platform their whole technical architecture just to get updated button styles?
- Context switching: I really dislike how mushed together everything can get in JS-only environments. One second you’re looking at functionality, the next you’re looking at HTML-like markup, and with CSS-in-JS you’re adding even more context-switching in an already noisy, crowded file. In my view, it’s inelegant. That said, I like how projects like Vue.js carve out an area for markup, style, and functionality in one file. I think that finds the sweet spot between separation of concerns and developer convenience.
labels, and really hacky styles that look like Dreamweaver generated them. Seeing this stuff makes me question the validity of the whole article/tutorial/course/project, and dare I say the whole trend. I realize that many times shortcuts are taken because the point of a demo is to show something other than writing good markup and styles, but I personally think it’s irresponsible to not try to bake in as many markup/style best practices into these demos. Seeing enough of this stuff makes me question whether CSS-in-JS advocates truly understand CSS as a language or care to preserve hard-earned CSS best practices.
We’ll see how I change my mind as I dive into this stuff a bit more, but for now I think my healthy skepticism is warranted.