CSS Trends Almanac for 2022 Part 2

Episode Summary

Executive Summary: Scott and Wes review HTTP Archive CSS trends, emphasizing what real websites actually use: near-universal box-sizing:border-box, growing use of CSS columns, emerging properties like aspect-ratio and individual transforms, heavy reliance on blend modes, responsive breakpoints shaped by Bootstrap/device conventions, and the relatively low adoption of newer practices like print styles, Houdini, and CSS-in-JS alternatives. They also discuss practical CSS and developer workflow takeaways throughout.

Main Topics: Box-sizing and foundational CSS defaults: The hosts note that border-box is used by almost all sites despite not being the default, and discuss how it became a de facto standard via CSS resets, frameworks, and best practices. CSS columns and layout use cases: They revisit CSS columns after earlier skepticism, acknowledging real-world use cases and noting increased adoption along with modern column subproperties. Modern motion and animation patterns: The episode covers transition properties, timing functions, keyframes, steps(), and the rise of individual transform properties like translate and rotate for clearer, more maintainable animations. Responsive design and media query trends: They analyze which media query features and breakpoint values are most common, tying them to device sizes, accessibility preferences, and especially Bootstrap-style breakpoints. Visual effects: blend modes, feature queries, and Houdini: The discussion covers blend modes for overlays and transparency effects, @supports usage, and the limited but intriguing adoption of Houdini paint worklets and smooth corners. CSS-in-JS, Sass, and practical styling workflows: The hosts compare CSS-in-JS libraries and Sass usage, arguing that CSS-in-JS works best for scoping rather than full design-system orchestration, while CSS variables and native CSS are increasingly sufficient. Print styles and obscure property usage: They highlight the surprisingly low use of print styles and investigate odd non-existent properties in scraped CSS, especially the mysterious 'archetype' entry.

Key Arguments: border-box is effectively the web standard now, and its ubiquity reflects how painful the old box model was. CSS columns have real niche value, especially when content should flow vertically into a constrained box rather than as a standard flex/grid layout. Animating top/left is discouraged; transform-related properties or individual transform properties are better for performance and clarity. One-second transitions are too slow for most interfaces; shorter durations around 200-400ms feel more polished and usable. Responsive design in practice is still dominated by Bootstrap-like breakpoints and width-based media queries, even as container queries loom. Blend modes solve many design problems that used to require image editing or rasterized assets, especially overlay and transparency effects. CSS-in-JS is most compelling as a scoping mechanism, not as the primary way to manage all theming and design tokens. Houdini and advanced print CSS are powerful but remain niche because of limited mainstream need and browser/support/debugging complexity.

Data Points: Web pages using box-sizing:border-box: 92% - Nearly universal adoption despite not being the CSS default. Web pages declaring box-sizing on the star selector: 44% - A common implementation approach for global border-box styling. Web pages declaring box-sizing once: 10% - Reported as a smaller implementation pattern. Median mobile page box-sizing declarations: 22 times - Shows repeated declaration/overrides across pages. Web pages using CSS columns: 23% - Up by 3 points since 2021. Web pages using aspect-ratio: 2% - Noted as significant for a relatively new property. Most popular transition property: all - The hosts note this is common but generally not best practice. Median transition duration: 1 second - Up from half a second previously, and considered too long by the hosts. 90th percentile keyframes per animation: 5 keyframes - Indicates many animations still use multi-step keyframe sequences. Web pages using prefers-reduced-motion: 34% - A notably high accessibility-related adoption rate. Web pages using prefers-color-scheme: 8% - Lower than the hosts expected for dark/light mode support. Most popular breakpoint: 768px - Followed by 600px, 1200px, 480px, and 992px; tied to Bootstrap/device conventions. Desktop sites with print-specific styles: 5% - Very low usage, despite usefulness for invoices, labels, and receipts. CSS-in-JS library share: styled-components: 49% - Still the dominant CSS-in-JS tool in the dataset. CSS-in-JS library share: emotion: 22% - Second-most-used CSS-in-JS library. CSS-in-JS library share: goober: 10% - A smaller but growing CSS-in-JS solution. CSS-in-JS library share: styled-jsx: 2.4% - Low usage despite being common in Next.js contexts. Houdini usage: Very little / small increase since 2021 - Mostly observed via smooth corners worklets with border-radius fallbacks. Most common blend mode: multiply - Followed by overlay, screen, darken, lighten, and soft-light. Most common longhand property mentioned: background-size - Presented as the most popular longhand property in the almanac discussion. Mystery non-existent property share: 11% - The top mystery property was 'archetype' among unknown CSS properties.

Pivotal Quotes: "92% of web pages use box sizing border box" — Scott: Introducing one of the biggest foundational CSS adoption stats from the almanac. "I’m no longer using Transform as a property in my CSS, and I’m only using the translate or rotate or any of those properties." — Wes: Explaining why individual transform properties are now his preferred animation approach. "The most popular breakpoint, it’s got to be standard iPad sizes: 941." — Scott: A guess that led into the realization that many breakpoints still cluster around Bootstrap/device-era values.

Implications: The web is converging on a mix of native CSS best practices and legacy framework patterns: border-box, width-based breakpoints, and accessibility media queries dominate, while newer features are adopted selectively. Developers should optimize for practical, broadly supported CSS rather than chase every cutting-edge feature.