Custom properties as the basis of CSS architecture
summary
Native CSS custom properties (CSS variables) are presented as real runtime variables that inherit through the DOM and obey the cascade, enabling techniques like responsive spacing via media-query-scoped runtime variables instead of build-time Sass hacks. The workflow described includes using the PostCSS plugin postcss-custom-properties to generate static fallbacks for older browsers while keeping the original variables, and manipulating them from JavaScript via element.style; recommended practices are scoping at :root or :host, providing fallbacks with var(..., fallback), and noting that variables cannot be used inside media-query arguments or inside url() functions.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:15CSS preprocessor limits
- 4:33CSS variables history
- 9:53CSS variable scope
- 12:44CSS variable concept
- 15:11Comparison with preprocessors
- 17:00Inheritance and cascade
- 20:33Cascade advantages
- 22:39Internationalization with variables
- 23:44CSS functions usage
- 25:28Variables in components
- 26:31JavaScript integration
- 27:55Legacy browser support
- 29:23Advanced use cases
- 30:24Future of CSS variables
- 30:45Closing remarks
- 31:11Q&A
related talks
26mThe strategy guide to CSS Custom Properties
18mDemystifying CSS Custom Properties
42mCustom Properties as the Foundation of CSS Architecture
28mStrategy Guide for CSS Custom Properties
31mThe rules have changed, Custom Properties!
38mDemystifying CSS Custom Properties
37mCSS Custom Properties
59mKeynote: CSS Variables: var(--subtitle);