🔍 Going through the “State of CSS” results…

Hi there!

A couple of days ago, the “State of CSS” survey results(opens in new tab) were published. If you’re not familiar, State of CSS is an annual developer survey which has been running since 2019.

I went through the results and quite a few things stood out to me. So, in this email, I want to share what I’ve discovered, and highlight the things I think are most important or interesting.

Link to this headingDemographics

The opening section is all about the demographics of the survey respondents. There are a few interesting findings around salary.

First, as you might expect, geography plays a huge role:

If you spend time in online developer communities, you’ve probably seen people talking about eye-popping salaries and acting like everyone has them. This is a good reminder that, outside the US, very few developers earn $100k+.

This pair of charts highlights it even further:

In the US, most respondents (~64%) earn $100k or more, but in the rest of the world, that number is only ~14%.

Interestingly, the next two countries with the highest salaries are Canada and Australia. Canada makes sense to me; we share timezones and a border with the US, so plenty of Canadians work remotely for US companies. Australia is on the other side of the world though! So maybe Australian companies pay really well?

Either way, these results reinforce something I’ve believed for a long time: if your goal is to earn a lot of money as a software developer and you don’t live in the US, your best bet is to work remotely. I have a blog post that shares my own experience as an international remote worker(opens in new tab), and another post about how to find remote work(opens in new tab), which digs into all of the logistics.

The survey results include lots of “cross-tabs”, breaking down salary by other variables. For the most part, they match expectations (eg. salary tends to increase pretty dramatically with experience).

Depressingly, there is a stark wage gap between male and female survey respondents:

If you identify as male and have female co-workers, I’d encourage you to see if there’s a wage gap at your office, and to advocate for equal pay!

Of course, randomly DMing your co-workers with "Hey, my salary is $X" would be a bit weird 😅. And you definitely shouldn’t ask your female co-workers what their salary is! When I worked at Khan Academy, someone started a spreadsheet where the team could contribute their information anonymously, including their title and total compensation. This let us all see if there were disparities.

And if you find out that your co-workers aren’t being paid as much as you are, please advocate for them with your manager! It’s so much more powerful when coming from someone else (it’s easy to dismiss someone raising concerns about their own salary, because who wouldn’t want more money).

Link to this headingUpcoming CSS features

Alright, onto the main attraction! Let’s talk about the CSS stuff.

The State of CSS’ format is to present the participant with a CSS feature and to ask whether they’ve used it or not. They can also optionally express a sentiment. If they’ve tried it, they can specify whether they liked it or not. If they haven’t, they can specify whether they’re interested or not.

One of the most widely-used modern CSS features is the :has pseudo-class. 73% of developers have used it, and people seem pretty happy with it (38% positive and only 0.4% negative):

I’m not surprised by its popularity. I’ve been using it myself for the past few months, and it blew my expectations out of the water. It’s quickly become an indispensable part of my toolkit. I share all my favourite use cases in my blog post, “The Undeniable Utility of CSS :has”(opens in new tab).

Rather than highlight the popular features, though, I think it would be more valuable to showcase some of the underrated features, the hidden gems. 😄

For example, text-wrap: pretty! This feature has only been used by 1/4 of survey respondents, but it’s so handy. It lets us avoid “orphans”, words that sit alone on the final line of a paragraph.

I like to end my sentences with an emoji, but this can lead to awkward situations like this, where only the emoji linewraps:

With text-wrap: pretty, it will ensure that the final line of text has at least two words, and shift things around so that the entire paragraph feels more balanced:

Avoiding orphans is the most obvious thing this property does, but really it’s a whole separate algorithm for managing line-wrapping, and it generally produces much more pleasant results. I recently added it to my CSS Reset(opens in new tab) to apply automatically to all paragraphs!

Another underappreciated feature is the ability to change the colorspace used for gradient interpolation. Only around 1 in 10 developers have taken advantage of this!

This feature can transform washed-out gradients like this one:

…into this one:

I have a blog post about gradient interpolation(opens in new tab) that explains how this all works. Back when I published this post, however, we had to manually calculate the stops using JavaScript. Now we can do it with this handy new syntax:

.elem {
  /* Fallback for older browsers: */
  background: linear-gradient(yellow, blue);

  /* Fancy new value: */
  background: linear-gradient(in oklch, yellow, blue);
}

Browser support is around 88%(opens in new tab), so we should still provide a fallback for older browsers. The gradient will be a bit less crisp for ~12% of users, but I think that’s fine in most circumstances.

Next up, the prefers-reduced-motion media query:

I was surprised to see that only ~44% of developers have used it. This feature is essential when doing any sort of animation that involves motion, to make sure we aren’t causing problems for folks who have vestibular issues. I have a blog post all about this(opens in new tab) (the blog post is React-specific, but the first half of the post doesn’t mention React at all and contains everything you need to know to use it in a vanilla CSS context).

Finally, there’s backdrop-filter:

This property isn’t exactly obscure, but I was surprised to see that almost 40% of developers have never used it!

It’s similar to the filter property, except instead of applying the filter to the element itself, it applies it to everything behind the element. This allows us to create frosted-glass effects, like on my blog’s header:

(Sorry for the poor quality of this GIF! I'm trying not to consume too much of your bandwidth ❤️)

(I should also note, I'm using this property in a slightly more advanced way here, using Artur’s realistic glass technique(opens in new tab). I'm planning on writing a blog post all about this soon!)

Link to this headingCSS Frameworks

So, the big story with CSS libraries over the past few years has been Tailwind.

I have complicated feelings about Tailwind. In terms of the developer experience, I find atomic CSS absolutely detestable 😅. I also have some concerns about Tailwind’s performance in large projects.

On the other hand: most of my quibbles are totally subjective, and exacerbated by my own inexperience with Tailwind. Ergonomics aside, I think Tailwind solves the most important problems, in terms of scoping and style isolation. And I like that front-end developers are getting excited about CSS!

I’ve been wondering for a few years what Tailwind’s ceiling is. Let’s see what we can learn from this year’s survey results:

75% usage seems like a lot, but this isn’t the full story. Notice the "50%" in the bottom left corner: that’s the percentage of survey respondents who answered this question.

When I answered the survey this year, I skipped this question because I don’t use any of these tools. So in terms of total usage, it’s 37.5% (75% of the 50% of respondents who answered this question).

How does that compare to previous years? It’s tricky: the survey format changed between this year and previous years. The closest value I was able to find is that 37.4% of survey respondents used Tailwind in 2023, but I'm skeptical of this number since a much larger percentage of respondents answered this question (74% to only 50%).

My hunch is that Tailwind is approaching its ceiling in terms of total usage, but I'll have to wait until next year, to have a true apples-to-apples comparison. Whether it’s plateaued or still growing, however, it’s clear that Tailwind isn’t going away anytime soon.

Link to this headingCSS-in-JS

My favourite way to write CSS is with the styled interface provided in libraries like styled-components, Emotion, and Panda CSS. And this year’s results are super interesting:

styled-components continues to be one of the most popular options, only slightly behind CSS Modules, with 59% usage. Only 36% of respondents answered this question, but that makes sense to me, given that these tools are React-specific, and this is a survey about CSS.

This number has actually grown since last year (when it was 49.9%), though again, I'm a bit skeptical of this since the format is different. Either way, it’s clear that a large percentage of the community still uses these tools, and I wish there was more enthusiasm around continuing to support these developers and their projects!

Link to this headingCSS Usage

The next part of the survey looks at how developers use CSS.

I found this graph pretty surprising:

Apparently, 1/3rd of survey respondents don’t test their work on mobile? This is kinda baffling; most internet traffic these days is mobile, so I don't know how you avoid testing on mobile!

I was also a little disheartened to see how few developers test the accessibility of their work:

• 28% test using keyboard navigation on desktop
• 27% test using devtools like aXe
• 19% test using screen readers

Maybe the question was phrased in a way that some people didn’t understand. I’m skeptical about that mobile number. Hopefully, all of these numbers are higher in the real world!

Finally, there’s this graph:

This one makes me happy. So many people have been working on CSS over the past few years, from specification authors to browser engineers. It feels like our community is really appreciating those efforts!

Those are the things I found interesting, but you can go through the results yourself(opens in new tab) to see what stands out to you!

With surveys like this, it’s always important to keep in mind that we’re not seeing the whole picture. Most developers don’t hang out in online developer communities at all, and have no idea that this survey exists! So we should be careful not to put too much faith in the results.

One of the underrated benefits of participating in surveys like this is that it helps teach you about the language! The State of HTML survey(opens in new tab) is running right now, and I learned about a pretty cool upcoming feature(opens in new tab) through it!

That’s all I have for you today. Hope your week is off to a great start!

PS: Speaking of participating in surveys, a reminder to my American friends that the US federal election is just around the corner! If you have a preference about which person becomes the next president, now is the time to do something about it.

Many states offer early in-person voting. This is a great way to avoid the lines and make sure you get your vote cast. For more information, check out vote.org’s early voting calendar(opens in new tab).