2022 CSS Trends and Usage Web Almanac

Episode Summary

Executive Summary: The episode dissects the HTTP Archive/Web Almanac CSS data to compare real-world web usage against developer assumptions. Wes and Scott highlight the dominance of legacy patterns like WordPress, Bootstrap, floats, and clearfix-style thinking, while also noting the rapid adoption of Flexbox and the slow rise of Grid and newer CSS features like custom properties, calc, and aspect-ratio. The discussion mixes data analysis, practical CSS opinions, and sponsor reads.

Main Topics: Web Almanac methodology and dataset scale: The hosts explain that the HTTP Archive crawls millions of sites and stores them in BigQuery, allowing analysis of what the web actually uses rather than what developers say they use. Legacy CSS patterns still dominate: Class names, IDs, and patterns like clearfix, WordPress-generated classes, Font Awesome, and Bootstrap-era conventions remain widespread across the web, even if they feel outdated to the hosts. CSS property and selector usage patterns: They review popular CSS properties, pseudo-classes, attribute selectors, and units, noting that everyday values like display, color, width, hover, and pixels dominate. Growth of modern CSS features: CSS custom properties, calc(), Flexbox, and newer layout techniques are clearly used at scale, though adoption varies widely and some features remain surprisingly underused. Color and function usage in the wild: The hosts explore color formats, named colors, gradients, and CSS functions, finding heavy reliance on hex, linear-gradient, and calc, with newer color spaces still rare. Practical opinions on CSS and web development: Throughout the episode, the hosts debate the usefulness of rems vs pixels, the value of important, and whether developers over- or underuse certain CSS features.

Key Arguments: The web’s real usage patterns are better revealed by crawled data than by surveys of developers, because old sites and templates remain online for years. Legacy conventions still heavily shape the web: WordPress and Bootstrap conventions appear in class names, IDs, and custom properties far more than many developers expect. Clearfix and float-based layout are effectively dead as a top-level class name pattern, showing the impact of Flexbox and modern layout methods. Flexbox is now mainstream across the web, while Grid is growing but still significantly behind. Pixels remain the dominant unit because they are practical and align with how modern browsers handle device-independent sizing. calc() is widely used because it solves common layout problems that mix percentage and fixed units, especially width calculations. CSS variables are increasingly popular, and much of their adoption appears to be driven by WordPress/Gutenberg and related tooling. Newer features such as aspect-ratio, CSS columns, and modern color formats are still relatively niche despite being useful. Some CSS habits, like overusing !important, remain common but are often signs of framework/plugin conflicts rather than good authoring practice.

Data Points: Websites in dataset: 8.3 million - HTTP Archive dataset used for the Web Almanac analysis Mobile-friendly sites: 7.9 million - Count of sites in the crawl labeled mobile friendly Desktop sites: 5.4 million - Count of sites in the crawl labeled desktop Percentage of CSS rules using !important at 50th percentile: 2% - Median use of !important in CSS rules across pages Most popular class name: active - Top class name found across websites Pages using hidden class: 204% - Reported as a high-frequency class name, indicating repeated use across multiple occurrences/pages in the dataset as described in the discussion Most popular attribute selector: type - Most common attribute selector, largely due to form/input targeting Most popular units: px - Pixels dominate over rem, em, percent, and other units Zero values written with unit: 13% use 0px vs 86% use 0 - Shows most authors omit units when the value is zero Most used calc() property: width - calc() is most commonly used to compute widths Most popular CSS custom property prefix: WP - A large share of custom properties come from WordPress-related tooling CSS variables source share: 40% WordPress/WP, 11% Elementor, 10% Bootstrap, 1.3% WooCommerce, 35% misc - Top custom property naming sources Most used CSS function: calc() - Top CSS function in the dataset Calc vs rgba usage: calc() is 5x more popular than rgba() - Comparison made during discussion of function usage Flexbox adoption: 74% - Share of websites using Flexbox Grid adoption: 12% - Share of websites using CSS Grid Flexbox growth over time: 49% -> 63% -> 71% -> 74% - Year-over-year adoption trend cited for Flexbox Grid growth over time: 2% -> 4% -> 8% -> 12% - Year-over-year adoption trend cited for Grid CSS columns usage: 23% - Later question about how many websites use CSS columns Aspect-ratio usage: 2% - Later question about adoption of the CSS aspect-ratio property Most popular color format: hex / short hex - Named as the most common way to specify colors Least popular color formats: Lab and LCH near zero - The newer color formats are essentially unused in the dataset Most popular pseudo-class: hover - Top pseudo-class in the dataset Most popular named color: medium spring green - Named color least/most discussion section referenced this as the least popular named color Most popular gradient function: linear-gradient - Top gradient form in CSS usage Top layout method: display: block - Displayed as the most common layout-related value

Pivotal Quotes: "Clearfix is dead. Floats are dead. Clearfix is officially dead." — Scott: Commenting on the disappearance of clearfix from top class names "People generally are taking a piece of the pie and subtracting something that is of a different basis." — Wes: Explaining why calc() is so widely used for layout math "The web’s real usage patterns are better revealed by crawled data than by surveys of developers." — Scott: Summarizing why the Web Almanac is valuable compared with State of CSS/JS style surveys

Implications: The web still runs on old habits and platform defaults, but modern CSS is steadily replacing them. Developers should expect WordPress/Bootstrap influence, use Flexbox/Grid/variables confidently, and recognize that real-world adoption often lags behind blog-post hype.