Hasty Treat - Uses for CSS Variables

Episode Summary

Executive Summary: The episode explains CSS custom properties (CSS variables): what they are, how they inherit and can be overridden, and why they’re more flexible than preprocessor variables because they’re live and can be changed with JavaScript. The hosts highlight practical uses like theming, scoped styling, transitions, and partial property control, while noting the biggest drawback: poor IE11 support and limited fallback options.

Main Topics: What CSS custom properties are and how they work: The hosts define CSS custom properties as reusable values declared with --name and accessed via var(--name), emphasizing that they behave like native CSS with inheritance and specificity. Why they beat preprocessor variables: Unlike Sass/Stylus variables, CSS variables are live at runtime, can be updated from JavaScript, and obey CSS cascade/specificity rules. Scoping and overriding variables: Variables can be defined at :root for app-wide use or within selectors for local scope, and can be overridden by more specific rules or inline styles. Practical use cases: theming and design systems: They discuss using variables for brand colors, semantic tokens like primary/accent, and swapping themes across an entire app by changing a small set of values. Advanced patterns with transforms, shadows, calc, and transitions: Variables help control individual parts of complex properties like transform and box-shadow, and can be combined with calc() and transitions for flexible animation and sizing. Bummers and browser support limitations: The main downside is lack of IE11 support and the absence of robust native fallback mechanisms, though PostCSS tooling can partially help.

Key Arguments: CSS custom properties are just CSS, so they integrate naturally with cascade, specificity, inheritance, and DOM updates without new language concepts. They are live values: changing a variable updates every reference automatically, making runtime theming and state-driven styling much easier than preprocessor variables. Semantic tokens (primary, accent, etc.) are better than literal color names because they support reuse, consistency, and easier theming. Custom properties solve real pain points in complex properties like transform and box-shadow by letting developers change only one sub-value instead of rewriting the full property. The biggest practical limitation is browser support, especially IE11, which can require duplicated declarations or tooling-based fallback strategies. PostCSS can be used to output both the variable syntax and fallback values, offering a partial compatibility strategy for older browsers.

Data Points: IE usage on Scott's site: 0.3% - Scott checked analytics for a course page with 20,000 visitors; around 0.3% were on Internet Explorer. IE11 share among IE users on Scott's site: 53 of 58 IE users - Most of Scott's IE traffic was IE11, with a small number on IE8. IE8 users on Scott's site: 5 users - A small minority of Scott's IE traffic was on IE8. IE usage on Wes's site: 0.25% - Wes reported similarly low Internet Explorer usage on his site. Chrome traffic on Wes's site: 74% - Wes mentioned Chrome as the dominant browser in his analytics. Safari traffic on Wes's site: 16% - Wes said Safari was the second-largest browser share in his analytics. Firefox traffic on Wes's site: 5% - Wes reported Firefox as a smaller share of traffic.

Pivotal Quotes: "They're live, meaning that in SAS or any preprocessor, you use a variable that gets compiled and then it's stuck." — Scott: Explaining the key runtime advantage of CSS custom properties over Sass variables. "You could simply just change the variable and they will then be applied." — Wes: Discussing how variable changes propagate through transforms, shadows, and theming. "The big problem is that they're supported pretty well, but they're not supported by IE11, which is a gigantic bummer." — Scott: Summarizing the main compatibility drawback of CSS custom properties.

Implications: For modern web apps, CSS custom properties make theming, animation, and dynamic UI updates far simpler and more maintainable. Teams still need a browser-support plan, but the industry trend is clearly toward native CSS variables and less reliance on preprocessors.