Breakin’ Up CSS Custom Properties

Show Notes

Why not take every major styling choice on a particular component and make it into a custom property? Then, when you need a variation, you can just change the custom property and not re-declare the entire ruleset. This has some nice advantages, like clearly presenting a menu of things-to-change and not needing to dig into subcomponents to re-style variations.

One small step further, you can break up the custom properties into parts, so you can control single aspects of them without affecting the others. Careful for the gotcha though on these “compound” properties.