671: Naming Consistency, HTML Includes, and Mixins

What It Covers

Dave and Chris explore CSS naming conventions, native mixins proposal, HTML includes debate, inverse text sizing techniques, and the evolution of CSS features including custom idents, style queries, and browser implementation priorities.

Key Questions Answered

• •CSS Mixins Proposal: Native CSS mixins will use dash-dash custom idents with apply syntax instead of include, accepting parameters like scroll-buttons-true and rerendering when custom property values change, enabling capabilities impossible in Sass preprocessors through browser-native reactive updates.
• •Inverse Text Sizing: Implement responsive heading sizes by calculating ratio of ideal characters per line divided by actual character count, then multiply max font size by this inverse ratio within clamp function, automatically shrinking long headings and enlarging short ones without JavaScript measurement loops.
• •HTML Includes Evolution: Google's declarative composable document updates proposal introduces view elements with matches attributes for URL-based routing and template swapping, diverging from simple HTML includes toward SPA-style functionality but requiring all templates present in initial document load without on-demand fetching.
• •Custom Ident Consistency: CSS increasingly requires dash-dash prefix for user-defined names in anchor positioning, scroll timelines, and view transitions, creating naming convention inconsistency across features. Emoji usage in custom idents enables visual differentiation of purpose but introduces Unicode rendering and compatibility concerns in large codebases.
• •CSS Feature Completeness: Browser CSS development may slow as language approaches feature completeness with strong layout mechanisms, native functions, and if conditionals now available. Future additions focus on primitives like mixins and functions that enable developers to build custom solutions rather than waiting for specific browser features.