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:

  1. 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?
  2. 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.
  3. 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 without 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.