I have yet to dive deep into CSS-in-JS, but I’ll admit I’m skeptical. This podcast by Chris Ferdinandi lays out a lot of the reasons why I’m a bit apprehensive.
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.
- Frontend best practices? – I’ve spent my career trying to craft elegant, scalable HTML, CSS, and JavaScript. I recognize that each layer in the frontend stack has its own best practices that leads to flexible, accessible, and performant experiences. As I dive into more articles, tutorials, courses, and projects about JS frameworks (which can also include stuff about CSS-in-JS), I encounter a ton of garbage markup and styles. It’s almost like saying “we’re doing everything in JS” gives developers permission to flush a few decades’ worth of HTML/CSS best practices down the toilet. I see really basic, cringeworthy stuff like
inputs withoutlabels, 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.