678: The 2023 State of CSS Survey Part 2 × CSS Frameworks × Tooling × Browser Usage

Episode Summary

Executive Summary: This episode reviews the 2023 State of CSS survey, focusing on CSS frameworks, CSS-in-JS, preprocessors, browser choices, pain points, and missing features. Wes and Scott argue that CSS is in an excellent place overall: Tailwind dominates, Bootstrap remains entrenched, CSS variables and modern layout tools have reduced reliance on CSS-in-JS, and tools like Lightning CSS and Stylelint are improving workflows. They also highlight where CSS still needs work, especially auto-animating to height, masonry, and broader browser consistency.

Main Topics: CSS frameworks and UI libraries: The hosts compare Tailwind, Bootstrap, Foundation, and smaller UI frameworks/component libraries, noting Tailwind’s strong adoption and Bootstrap’s enduring presence. They also distinguish between styling systems, component libraries, and toolkits that bundle JavaScript behavior. Decline of CSS-in-JS: They discuss the downward trend of styled-components, Emotion, CSS Modules, and related tools, attributing it to CSS variables, improved framework-native styling, performance concerns, and the shift toward utility-class workflows. Preprocessors and tooling: Sass still leads traditional preprocessors, PostCSS is likely undercounted because many users don't realize they're using it, and newer tools like Lightning CSS, Stylelint, Prettier, and Project Wallace are highlighted as important workflow helpers. Browser usage and devtools: Chrome remains the default primary browser, Firefox is a strong second, Safari is valued for battery/performance and catching bugs, and Edge’s presence surprises the hosts. Polypane is praised as a specialized development browser. CSS pain points and missing features: The episode covers persistent frustrations like browser compatibility and form styling, plus highly requested features such as animating to auto height, masonry layout, more pseudo-elements, and grid line styling. State of the CSS ecosystem sentiment: The hosts emphasize that CSS is in the best shape it has ever been, with modern layout, variables, and adaptive techniques making the language far more powerful than in the past. Sick picks: Wes recommends step drill bits for flexible drilling through wood, metal, and plastic, while Scott recommends a YouTube timeline series on heavyweight boxing history.

Key Arguments: Tailwind’s usage and interest make it the dominant modern CSS framework, even if its novelty has leveled off. Bootstrap remains deeply embedded in the web and is unlikely to disappear because many sites only use it for stable, low-maintenance layout needs. CSS-in-JS is declining because CSS variables and framework-native scoped styles solve many of the same problems without extra runtime or Babel complexity. Sass persists because teams are locked into existing workflows, but CSS and modern tools have reduced the need for many of its features. PostCSS usage is probably underreported because developers often benefit from it indirectly through build tools like Tailwind, Parcel, or Vite. Lightning CSS is poised to grow quickly because it combines parsing, transforms, bundling, minification, and future CSS support in one easy tool. Browser compatibility and form control styling remain the most painful ongoing CSS issues. CSS is now powerful enough that many common responsive-design problems can be solved with Grid, clamp(), dynamic units, and container queries instead of media-query-heavy approaches.

Data Points: Tailwind retention: 75% - Reported as the clear leader among CSS frameworks. Tailwind interest: 46% - Interest in Tailwind remained high, though lower than 2020. Tailwind interest in 2020: 62% - Used for comparison to show the drop in interest over time. CSS frameworks happiness: Most respondents were happy, very happy, or neutral - Survey sentiment on CSS frameworks was described as largely positive. Unhappy with CSS frameworks: 5% - Only a small minority reported dissatisfaction. Sass usage: 72% - Most respondents said they regularly use Sass or another pre/post-processor. PostCSS usage: 45% - Likely undercounted because many users don’t realize they are using it. Stylus respondents: 290 - Very low compared with Sass and PostCSS. CSS Modules usage: 44% - Scott found this surprisingly high given his poor DX with CSS Modules. Lightning CSS respondents: 213 - Suggested as a fast-growing modern CSS tool. Project Wallace respondents: 30 - A niche CSS analysis tool used by a small number of respondents. Primary browser: Chrome: 81% - Most developers reported Chrome as their primary browser during initial development. Primary browser: Firefox: 56% - Second most common primary browser. Primary browser: Edge: 23% - Surprising presence in the survey. Primary browser: Safari: 18% - Used for some development, especially on Mac for performance and battery life. Browser compatibility as a pain point: Highest among pain points - Consistently ranked as the most frustrating CSS issue. Form elements styling: Second-highest pain point - Native form controls remain difficult to style consistently. Responsive design as a pain point: Notable share of respondents - Despite better tooling, responsive work still frustrates many developers. Most requested missing feature: Animate to auto - Top missing CSS feature in the survey. Masonry layout: High demand - Frequently requested, though the hosts questioned how often it matters in practice. Most commented feature: Subgrid - Generated 531 comments, by far the most feedback. Highest retention tool: Open Props - Reported as 91% retention; framed as a strong indicator of user satisfaction. Most adopted feature: Container queries - The hosts expected variables but the survey revealed container queries as the big mover, with dynamic viewport units also noted. Industry sector: programming/technical tools: Largest sector - Most CSS survey respondents work in software/tooling companies. CSS vs JavaScript time split: Slightly more JavaScript than CSS for many respondents - The survey suggested a fairly balanced split overall.

Pivotal Quotes: "CSS variables are reactive, change a variable literally anywhere that variable is used or computed to be used." — Scott Tolinsky: Scott argues that CSS variables eliminate a major reason people adopted CSS-in-JS. "CSS is the best it's ever been, it is shockingly good." — Scott Tolinsky: Scott summarizes his positive view of the modern CSS ecosystem. "I think we have to stop using Sass because I want my loops and everything like that. You a lot of the time, probably 87% of the time, you can get it done a different way." — Wes Boss: Wes explains that many Sass use cases can now be handled with modern CSS techniques.

Implications: CSS is maturing into a more capable, less fragmented platform. Teams can rely more on native CSS features, modern layout tools, and lightweight build tooling, while still expecting gradual progress on long-standing gaps like animation, masonry, and form styling.