FrontendHaltCSS·Intermediate·Coding·1 min read
Why might you scope a custom property to a component root instead of :root?
Short interview answer
Scoping narrows the override's blast radius to one component instance, useful for configurable widgets, such as a --columns value read by that component's grid, or for local variants that shouldn't leak into sibling components; :root should generally hold only genuinely global design tokens.
Example
.masonry { --cols: 3; columns: var(--cols); }.masonry.dense { --cols: 5; } /* only this instance */Key takeaway
Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.