Yo Kirupa folks, I’m refactoring a little design system at work and I’m trying to keep component styles predictable while still letting state variants (loading/disabled/error) stack without surprises.
.card { --bg: white; background: var(--bg); }
.card.is-loading { opacity: .6; }
.card .button { --bg: #222; }
.button { background: var(--bg); }
Right now a nested .button inside .card “inherits” the card’s CSS variable setup in ways that feel accidental, and small changes cause random-looking visual regressions, so what’s your go-to CSS architecture pattern to keep variants scoped and composable without a specificity arms race?
