That an invalid customized property invalidates the complete declaration isn’t stunning, however I didn’t think about it till I noticed considered one of my declarations break. I suppose it’s simply good to know that, particularly in case you’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 little thing all on the identical time. If a customized property is invalid, the cascade received’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 the complete declaration turns into invalid, together with the entire implied constituents. No bueno certainly.
What to do, then?
So, possibly don’t use customized properties in shorthand properties or use customized properties however don’t use shorthand properties.
Nice recommendation, Manuel!
