CSS variables (aka CSS custom properties) do not have access to the cascade. That means they can't fall back to earlier rules, so if your variable is invalid, the browser will simply unset that property. Huh. Jeremy explains the logic behind why this needs to be the case but it's still interesting. I understand that dynamically generated variables should probably work this way, but on initial render I'm still surprised it doesn't hold on to the current cascade value whilst it checks the variable and just fall back to that if the variable is invalid.

But if I store the background colour in a custom property, I can no longer rely on the cascade.