May 2nd: Lunch with Vue, CSS Sailing, and SVG Mountains

Chris' Corner

The results from the State of Frontend 2022 are out, with 3703 respondents. Despite "frontend" not being a word (ha!), I thought the results about styling were interesting enough to respond to.

The question was specifically about favorites: Over the past year, which of the following design systems was your favorite go-to solution?

And the results:

That all adds up to well over 100% so I'm not sure if people had multiple favorites or what. I'll just respond to the general popularity rankings and relative popularity.

Wow, look at Sass go! If a kid was born the day Sass was released, they'd be learning to drive today. That's incredible longevity for any software tool, especially in the fast-moving world of front-end development tools. Having nearly half of respondents say they not only use Sass but it's their favorite is incredible to me, and I happen to agree since it's a favorite of mine as well. I think the syntax of it is quite nice, even though I tend to only use a handful of features like nesting and light mixin usage. Sass is, in a sense, up against CSS itself these days. I would guess variables are one of the top reasons developers reach for Sass, but Custom Properties have arrived in CSS and their support is ubiquitous, all but eliminating the need for Sass variables. Even nesting has momentum in CSS standards bodies, so we'll see if that one makes a dent in Sass usage as the years tick by.

Sass is a tricky one though. Usage of Sass doesn't mean that's all you're using. For example, PostCSS (only represented in the "Other" section here) is somewhat designed to be used in conjunction with Sass, at least optionally. Similarly with CSS Modules. While you can use CSS Modules alone, you can almost just as easily use it with Sass. That happens to be a favorite combination of mine, and it's not particularly esoteric as the wildly popular Next.js ships out of the box supporting this combo.

A monster showing for Styled Components as well! What strikes me about this is that the question is just about the usage of styling tools, but “Styled Components” all but implies the usage of React as well. So to see this big of a slice of the pie, especially combined with Emotion, Chakra, and Vanilla Extract, all of which I would guess primarily see usage in a React environment, shows off just how wildly dominant React was for participants of this survey. It makes me think of the other big JavaScript frameworks a bit. Where are the Vue people at? I don't see anything specifically called out in “Other”. They might just… not think about it? Styling is a built-in thing in Vue Single File Components land. You don't make a ton of styling tool decisions in Vue, as it's just there for you. And this brings me back to Sass a bit. Just as it's trivial to use Sass in Next.js, so too can you use easily use Sass in Vue, Svelte, or newer meta frameworks like Astro.

It's not terribly surprising to see that regular ol' CSS is barely a blip here, knowing how heavily JavaScript framework usage is represented here. Once you're in a component-driven architecture, having CSS that is scoped to those components and offers additional utility through the availability of JavaScript, it makes sense that people take advantage of that, despite the thickening of the stack, as it were.

Tailwind's popularity here also comes as no surprise here. If you asked me five years ago if I thought something like Tailwind would become popular, I would have said “no”, but I would have been wrong. I've heard from countless developers that the idea of using HTML classes to style things just clicks for them. I have my own suspicions. If done well, the CSS produced by Tailwind is highly likely to be smaller (extra important for a blocking resource like CSS) which is a nice performance benefit from a tooling choice people seem to like anyway.

It's nice to see tools like Vanilla Extract trying to offer a modern variety of developer ergonomics in styling, and also be very focused on ensuring that good performance is the default behavior. Which generally means "extracting" "vanilla" CSS, if you follow their naming pun.

All this makes me wonder what the results would be if we could see data on, say, the styling choices of the top 5000 websites by traffic. Or the choices made on the last 5000 websites published on the internet. Or the top 5000 most actively developed websites on GitHub. Would it be similar? It's hard to say whether they would be completely different.

But I think of that staggering statistic following WordPress around: 43% of all the websites on the internet are on WordPress. It's not that you can't build a JavaScript framework-powered WordPress site, some people do, but I'm sure a tiny slice of all those WordPress websites. So what are they doing? Are they the big Sass users? Wouldn't you think a decent amount of them are vanilla CSS just because WordPress itself doesn't offer any built-in styling tools? Or maybe most of those sites aren't really built by developers, but just self-serve deployments?

It's certainly fascinating to watch styling tool choices change over the years. The only thing I'm quite certain of is that a few years from now, there will be surprises on this survey that would be impossible to guess today.