CSS Custom Properties Beyond Theming: Patterns I Use Daily
Custom properties are not just for colors and themes. Here are the advanced patterns. cascading, scoping, and computed values. I rely on. Most introductions to CSS custom properties stop at theme switching: define a color on:root, override it in a dark mode selector, done. That covers maybe a third of what custom properties can do. The real power shows up when you start scoping them, computing with them, and using them as runtime configuration. I want to share the patterns I use every day that go beyond simple theming. Last year I built a design system for a fintech app. We had forty-something components, each with density variants (comfortable, compact, dense), size variants, and theme variants. Without custom properties, that would have been a combinatorial explosion of class names. With them, it was a handful of variables per component and a CSS file that stayed under 1500 lines. Cascading by Design Unlike Sass variables, custom properties cascade through the DOM. A property defined on:root is available everywhere, but you can redefine it on any element and the new value applies only to that subtree. This is the feature that makes component-level theming…