That an invalid customized property invalidates your complete declaration isn’t shocking, however I didn’t think about it till I noticed one among my declarations break. I assume it’s simply good to know that, particularly for those who’re working loads with customized properties.
This simply qualifies as a “gotcha” in CSS and is an effective reminder that the cascade doesn’t know every part all on the similar time. If a customized property is invalid, the cascade gained’t ignore it, and it will get evaluated, which invalidates the declaration. And if we set an invalid customized property on a shorthand property that mixes a number of constituent properties — like how background and animation are each shorthand for a bunch of different properties — then your complete declaration turns into invalid, together with the entire implied constituents. No bueno certainly.
What to do, then?
So, perhaps don’t use customized properties in shorthand properties or use customized properties however don’t use shorthand properties.
Nice recommendation, Manuel!
