756: CSS Is Getting Mixins + Functions

Episode Summary

Executive Summary: The episode discusses a new CSS proposal for native mixins and custom functions, explaining how it could bring many Sass-like capabilities into the platform. The hosts argue this would reduce boilerplate, improve readability, and enable more dynamic, reusable, and context-aware styling without relying on preprocessors or build-time generation.

Main Topics: CSS mixins and functions proposal: The hosts explain that the proposal has been accepted into drafting, meaning the syntax and behavior are now being designed before browser implementation. They frame it as a major step toward bringing Sass-style power into native CSS. Why native CSS abstractions matter: They argue that variables and nesting solved part of the problem, but mixins and functions address remaining gaps like reusable patterns, complex calculations, loops, and scoping issues. Functions as value calculators: CSS functions are described as tools for returning a single computed value, useful for theme lookup, color math, fluid sizing, and project-specific utilities like contrast or lightening logic. Mixins as reusable blocks of styles: Mixins are presented as returning bundles of declarations, media queries, container queries, and other logic that can be applied to selectors with parameters, enabling concise dynamic styling. Logic and conditional styling in CSS: The conversation expands to loops, if-like behavior, media/support/style queries, and how these features make CSS increasingly programmatic and expressive. Impact on tooling and frameworks: They suggest tools like Tailwind could adopt these primitives to reduce generated classes and support dynamic runtime behavior more elegantly, while library authors could publish reusable CSS functions and mixins. Standards participation and syntax discussion: The hosts encourage thoughtful participation in the standards process, emphasizing that syntax is still open and feedback should be constructive rather than dismissive.

Key Arguments: Native mixins/functions would eliminate many Sass-only use cases and reduce reliance on preprocessors. Functions are best for computing one value; mixins are best for returning multiple declarations and rule blocks. CSS is already moving toward more logic via nesting, container queries, and style queries, so custom abstractions are a natural extension. A standardized native approach would allow reusable, shareable styling logic without pre-generating every class or variant. Library authors could ship CSS utilities like theme lookup, contrast color, triangle generation, and fluid typography as reusable functions/mixins. Runtime-native CSS abstractions can respond to page state and theme context in ways build-time tools cannot. Constructive standards feedback matters because syntax decisions are still being finalized and community input can shape the outcome.

Data Points: Proposal status: Accepted into drafting stage - The mixins and functions proposal has moved past acceptance and is now being designed for eventual browser implementation. Browser support for style queries: Partial support in Chrome and Safari - Mentioned as already working for CSS custom properties, with no support yet in Firefox. Firefox support for style queries: No support - The hosts note that Firefox has not yet moved on style queries. Container query units: CQW, CQH - Referenced as existing units used for sizing based on container dimensions. Color palette scale example: 11 colors and 11 variations (about 240 colors) - Used to illustrate how utility frameworks generate large numbers of combinations, especially with opacity variants. Opacity variants example: forward/slash 10, forward/slash 15 - Given as an example of Tailwind-style utility combinations that can explode combinatorially.

Pivotal Quotes: "functions and mixins being added to CSS is going to solve all those problems" — Wes Boss: Summarizing why the proposal matters beyond variables and nesting. "This is like the promised land for really concise CSS, really tuned CSS." — Wes Boss: Describing the potential of parameterized mixins for reusable, flexible styling. "don't just say, Yeah, this syntax sucks" — Scott Tolinsky: A warning to listeners about how to engage constructively in standards discussions.

Implications: If adopted, native mixins and functions could make CSS far more expressive, reduce preprocessor dependence, and enable framework and library authors to build more powerful, runtime-aware styling systems.