The strategy guide to CSS Custom Properties
summary
Custom properties are dynamically scoped CSS values that inherit and obey the cascade so use preprocessors for static globals (brand colors, spacing) and custom properties for locally dynamic values tied to media queries or DOM state. Place all variable declarations and media queries at the top — the logic fold — and update one CSS variable instead of swapping names. Use the JS API or postcss-css-variables to polyfill old browsers. This workflow ships in production and noticeably simplifies responsive and theming work.
AI-written summary · about
chapters (18)
- 0:00Introduction
- 3:07What are custom properties
- 5:58Dynamic scope
- 7:20Global
- 8:03Static
- 10:57Assigning custom variables
- 11:46Using preprocessors
- 12:22Dont do what it run time
- 13:12Modular scale example
- 14:43Change the value not the variables
- 15:57Fragmented values
- 16:27Separating logic from design
- 17:54The logic fold
- 18:51Example
- 21:40Global Custom Properties
- 22:26Updating Custom Properties
- 23:22Style Attributes
- 24:00Use Custom Properties Today
related talks
42mCustom properties as the basis of CSS architecture
28mStrategy Guide for CSS Custom Properties
31mThe rules have changed, Custom Properties!
18mDemystifying CSS Custom Properties
42mCustom Properties as the Foundation of CSS Architecture
37mCSS Custom Properties
38mDemystifying CSS Custom Properties
59mKeynote: CSS Variables: var(--subtitle);