That an invalid customized property invalidates your entire declaration isn’t shocking, however I didn’t take into account it till I noticed one among my declarations break. I assume it’s simply good to know that, particularly for those who’re working quite a bit with customized properties.
This simply qualifies as a “gotcha” in CSS and is an efficient reminder that the cascade doesn’t know every little thing 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 entire declaration turns into invalid, together with all the 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!
