The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 responses. The survey is run by me, Sacha Greif, with help from a team of open-source contributors and consultants.
This year's logo and t-shirt were designed and animated by Christopher Kirk-Nielsen.
Survey Goals
This survey, along with the State of JavaScript survey, was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices.
As such, these surveys are focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why the features or technologies that are currently most widespread are not always included.
Survey Design
The survey was designed in part based on last year's survey, with an open feedback period where the survey outline was discussed on GitHub. All survey questions were optional.
Survey Audience
The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily a mix of respondents from past surveys (alerted through a dedicated mailing list) and social media traffic.
Representativeness & Inclusivity
While we believe it's important to give a voice to every community, the reality is that an open survey like this one will always struggle to properly represent everybody, especially when operating through systems that already carry their own inherent biases.
In order to counter-balance this, we are implementing three distinct strategies:
Outreach: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current audience.
Data Analysis: through features like facets and variants, we're always trying to make it easier to surface the voices of any demographic segment, no matter how minoritized it might be in our data.
Barrier Lowering: making the survey too long, inaccessible, slow to load, English-only, etc. can all contribute to imposing an "effort tax" that cuts off the parts of the community that can't afford to pay it. Fixing these issues can lower the barrier to entry and in the process make our audience more diverse.
Project Funding
Funding from this project comes from a variety of sources:
T-shirt sales.
Sponsored links: the links to recommended resources at the bottom of each page are provided by our partner Frontend Masters.
Other Funding: this year, the Google Chrome team set aside a small budget to help hire an accessibility consultant to work on the survey.
Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be greatly appreciated. I would especially like to work closely with more browser vendors, since they play such a central role in the web ecosystem.
Technical Overview
You can find a more in-depth technical overview of how the surveys are run here.
- Data collection: custom Vulcan.js app.
- Data storage/processing: MongoDB & MongoDB Aggregations.
- Data API: Node.js GraphQL API.
- Results Site: Gatsby React app.
- Data Visualizations: Nivo React dataviz library.
- Type: IBM Plex Mono and Bebas Neue.