Custom Properties as the Foundation of CSS Architecture
summary
The talk explains how CSS Custom Properties (CSS variables) can be used as a foundation for CSS architecture, showing practical examples of their application and how they enable patterns that preprocessors used to provide. It examines questions of inheritance vs. BEM, backward compatibility strategies, and discusses related specs like CSS Custom Selectors and the @apply rule as part of a move away from preprocessors.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:17CSS preprocessors impact
- 3:50CSS variables evolution
- 7:19Native vs preprocessor vars
- 10:07Rendering with variables
- 13:38Variables and media queries
- 16:27Cascade and inheritance
- 18:21Theming and fallbacks
- 20:26Interface i18n
- 21:52Computed values
- 22:55Variables with JavaScript
- 23:39Current spec limits
- 27:32Native mixins
- 29:39Custom selectors
- 31:45Runtime advantages
- 32:26Conclusion and future
related talks
18mDemystifying CSS Custom Properties
31mThe rules have changed, Custom Properties!
42mCustom properties as the basis of CSS architecture
26mThe strategy guide to CSS Custom Properties
38mDemystifying CSS Custom Properties
37mCSS Custom Properties
28mStrategy Guide for CSS Custom Properties
59mKeynote: CSS Variables: var(--subtitle);