The State of CSS 2022: Gauging my current CSS knowledge

October 19, 2022

A week ago, I took the State of CSS 2022 survey. This is the third year that I have participated. The purpose of the survey is to understand developers’ awareness, knowledge, and usage of newer CSS features. Personally, I always benefit from taking the survey as it helps me identify CSS features that I need to learn more about.

The survey goes through different categories of features:

• layout
• shapes and graphics
• colors
• interactions
• typography
• accessibility
• selectors
• other features
• CSS frameworks
• CSS-in-JS
• other tools
• CSS usage
• resources
• about you

And you answer one of the following for each feature:

• “Never heard of it/Not sure what it is”
• “Know of what it is, but haven’t used it”
• “I’ve used it”

This year, my knowledge score was quite a bit lower than in previous years.

• 2022 – Knowledge score of 61% (33 of 54 selectors), top 27% of respondents
• 2021 – Knowledge score of 81% (43 of 53 selectors), top 23% of respondents
• 2020 – Knowledge score of 93% (41 of 44 selectors), top 4% of respondents

So why do I score so much lower this time around?

• CSS is evolving faster than ever. It is becoming harder and harder to keep up with all the changes. I think this is the biggest reason that I scored much lower this time around.
• There were a lot of questions about CSS frameworks and CSS-in-JS. I don’t use CSS frameworks nor do I use CSS-in-JS. So I pretty much ignore that space as far as learning and knowing what the tools are.
• There were several features that I have heard about or read something about but not used and did not feel confident answering “I know what this is.” I wish they would add another response of “Heard about it or read about it but don’t really understand it yet and haven’t used it.” I was just less confident about some of my answers this year.
• I don’t know a lot about the color space of CSS. I have not paid as much attention because our designers are not using those color spaces. But after seeing a post by Jen Simmons recently, I would like to dive more into this and educate our designers on the richer color palettes that we can now tap into. (Jen also talked about color space on Shop Talk Show.)

Because there is so much to learn, I tend to concentrate on what interests me most or what I need to do my job. Layout properties really interest me so I have heard of all the features and have used 7 of the 10 in my work including container queries. I didn’t know a lot about a lot of the color features though I think I have read about them but don’t recognize the features by name or could tell you what they do. Our designers are not using those color spaces so it is an area I have tended to ignore.

I did go back last night and changes a couple of my answers. There were some features that I did know a little bit about–I have at least been exposed to them. After changing some of my answers, my knowledge score went up to 65%, which put me in the top 19% of all respondents.

My conclusion is that there is just a lot to learn about CSS these days because a lot of features are being incorporated into browsers. It is an exciting time. And I feel good about my strategy of learning what interests me or what I need to do in my daily work. And I am okay with the fact that I don’t know a lot about the CSS framework or CSS-in-JS spaces.

I did make a list of things that I would like to learn more about:

• object-view-box
• content-visibility
• backdrop-filter
• color-mix()
• Wide gamut colors
• relative colors
• gradient color spaces
• scroll-snap
• overscroll-behavior
• touch-action
• scrollbar-gutter
• font-display
• line-clamp
• font-palette
• color-contrast
• color-scheme
• prefers-contrast
• forced-colors
• :where() and :is()
• @property
• will-change
• image-set – I remember reading about this a few years ago. I did not realize that it had really good support now. It is responsive images for backgrounds
• image()

Another perspective

I still have not watched it, but here is Kevin Powell’s take on this year’s survey.