CSS Wishlist

Episode Summary

Executive Summary: Syntax hosts Scott and Wes brainstorm a CSS wish list: a set of features they’d love browsers to support, from mixins and range/grid selectors to better fit-text, overflow escaping, inline-style parity, and richer attribute access. They weigh practical workarounds, caveats, and why some ideas may be difficult or risky, while highlighting how CSS is increasingly powerful but still missing ergonomic primitives.

Main Topics: CSS mixins and reusable styling primitives: They want mixins in native CSS as a reusable way to bundle multiple declarations, similar to Sass/Stylus. They debate duplication risks and how mixins could complement CSS variables. Grid/structure-aware selectors: A major wish is for selectors like range selectors, nth row/column, first/last of row/column, and selecting wrapped items in responsive grids without JavaScript. Typography and sizing helpers: They discuss a native fit-text-like capability and easier animation of height:auto so text and content can size and transition more naturally without JS hacks. Overflow and scroll-state styling: They want CSS to better handle overflowed content, including allowing shadows or flourishes to escape scroll containers and styling elements based on overflow/scroll state. Expanded attribute and inline-style support: The hosts wish for full CSS support in inline styles and broader attr() usage beyond pseudo-element content, enabling more dynamic styling from HTML attributes. Color transformation functions and theming: They argue for native color manipulation functions such as lightness/darken/tint-style operations to make theming and palette generation easier across modes. Developer ergonomics for testing and container queries: They discuss a native resizable-box/devtools experience for testing container queries and note that some container query patterns can create circular resize issues.

Key Arguments: Native mixins would reduce repeated CSS and better fit a variable-driven styling workflow, though they can also encourage overuse and duplication. Selectors that understand grid structure (rows, columns, wrapped items, first/last in row) would eliminate fragile nth-child hacks and many JavaScript workarounds. Fit-text and auto-height animation are recurring pain points that currently require custom JavaScript or imperfect container-query heuristics. Overflow behavior should be more expressive so shadows, masks, and visual embellishments can extend beyond scroll containers without layout hacks. Inline styles still lack the power of full CSS, especially for states like hover, media/container queries, and pseudo-classes, making them an incomplete styling primitive. Color transformation functions would dramatically simplify theming by deriving shades/tints from a few base variables instead of maintaining many hard-coded hex values. Some proposed features may be difficult because of circular reflow/re-render problems, especially when styles depend on geometry that they also change.

Data Points: CSS wish-list items discussed: 15+ - The episode walks through a long list of desired CSS features and selectors. Grid selector range example: 3 through 6 - Wes describes wanting a selector that can target a numeric range of grid items. Resize/loop guard example: 2 - Scott mentions using a guard like a render count of two to prevent infinite reflow loops in responsive navigation logic. Character-count sizing buckets: small / medium / large - Scott describes a practical workaround for text sizing by bucketizing content based on character count. CSS variables for theme simplification: 5 variables instead of 20–25 - They describe how color functions could enable theming from a small set of base variables rather than many shades and tints. Container query threshold example: 400 pixels - Scott uses 400px as an example breakpoint for changing styles based on container size.

Pivotal Quotes: "This is maybe not stuff that should or shouldn't come. But yeah, like it's this is maybe not stuff that should or shouldn't come." — Scott: Framing the episode as speculative brainstorming rather than a proposal set. "I would love to be able to tell something to escape the overflow somehow." — Scott: Describing the need for shadows and decorative elements to extend beyond scroll containers. "Can we just get it in CSS as well?" — Wes: Repeatedly emphasizing that JavaScript workarounds exist, but native CSS support would be preferable.

Implications: The episode highlights a mature CSS ecosystem still missing ergonomic primitives. If browsers adopt more structural selectors, color functions, and overflow/state APIs, developers could replace many JavaScript hacks with cleaner, more maintainable CSS.