Frontend Development 16 min read

2022 State of CSS and State of JS Survey: Key Findings, Trends, and Developer Pain Points

The 2022 State of CSS and State of JS surveys, which collected 14,310 CSS and 39,472 JavaScript responses, reveal demographic details, highlight rapidly adopted CSS features like flex gap, aspect‑ratio, and :has, showcase popular JavaScript language enhancements such as nullish coalescing and top‑level await, and expose developers' satisfaction, usage, and pain points across frameworks, tools, and browsers.

ByteFE
ByteFE
ByteFE
2022 State of CSS and State of JS Survey: Key Findings, Trends, and Developer Pain Points

This article presents an analysis of the 2022 State of CSS and State of JS surveys, which together gathered 14,310 CSS and 39,472 JavaScript questionnaire responses.

Survey demographics : respondents are primarily aged 24‑34, with Chinese participants representing 0.8% of the total but roughly 10% of the front‑end market when estimated via antd and cnpm download statistics.

CSS feature adoption : notable growth is seen in layout features such as flex gap and aspect-ratio , graphics filters ( filter , backdrop-filter ), color inheritance ( currentcolor ), interaction controls ( scroll-behavior , scroll-snap ), typography ( font-display ), accessibility ( :focus-visible ), and selectors ( :has , :where ). Long‑standing features like css variable and css comparison function remain top‑used.

CSS tooling : Pre/post‑processing tools (PostCSS, Sass, Less) stay stable. In CSS frameworks, Tailwind CSS leads in satisfaction, while Bootstrap dominates usage but sees declining satisfaction. Among CSS‑in‑JS solutions, CSS Modules regains top satisfaction, with vanilla-extract dropping.

Browser and device testing : Developers test mainly on Chrome, Firefox, Safari, and Edge; legacy browsers like IE11/IE8 receive little attention. Mobile testing focuses on Safari iOS and Chrome Android.

CSS pain points : native nesting, Safari compatibility, varying feature support across browsers, and CSS‑in‑JS performance/SSR issues are highlighted.

JS feature adoption : language features with high uptake include Nullish Coalescing ( ?? ), top‑level await, and String.prototype.replaceAll . Browser APIs such as WebSocket , Shadow DOM , and Service Worker remain popular, while PWA and WebAssembly maintain moderate usage.

Frameworks and tools : Satisfaction peaks for newer frameworks Solid.js and Svelte , while usage is still dominated by React, Angular, and Vue. Rendering frameworks like Astro and SvelteKit score high in satisfaction; Next.js leads in usage. Testing tools see vitest rising, though Jest remains the most used. Build tools show vite climbing in both satisfaction and usage, while webpack stays the usage leader. Monorepo management favors pnpm and yarn workspace .

JS pain points : code architecture, dependency management, and state management are the top concerns, with tools like node_modules , mobx , redux , and immer discussed.

Highlights : CSS’s emerging features :has() and @container are moving from “never possible” to implementation, and Subgrid gains traction. In JS, lightweight frameworks ( Svelte , Solid ) and the rapid adoption of vite illustrate a vibrant ecosystem.

Overall, the front‑end ecosystem remains highly active, with both CSS and JS domains showing strong growth, evolving tooling, and clear developer priorities.

frontendJavaScriptWeb DevelopmentCSSSurveystate-of-cssState of JS
ByteFE
Written by

ByteFE

Cutting‑edge tech, article sharing, and practical insights from the ByteDance frontend team.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.