[Manuel Matuzović](https://www.matuzo.at/blog/2025/invalid-custom-properties-in-shorthands):

> That an invalid custom property invalidates the entire declaration isn’t surprising, but I didn’t consider it until I saw one of my declarations break. I guess it’s just good to know that, especially if you’re working a lot with custom properties.

This easily qualifies as a “gotcha” in CSS and is a good reminder that the cascade doesn’t know everything all at the same time. If a custom property is invalid, the cascade won’t ignore it, and it gets evaluated, which invalidates the declaration. And if we set an invalid custom property on a shorthand property that combines several constituent properties — like how `[background](https://css-tricks.com/almanac/properties/b/background/)` and `[animation](https://css-tricks.com/almanac/properties/a/animation/)` are both shorthand for a bunch of other properties — then the entire declaration becomes invalid, including all of the implied constituents. No bueno indeed.

What to do, then?

> So, maybe don’t use custom properties in shorthand properties or use custom properties but don’t use shorthand properties.

Great advice, Manuel!

---

[Maybe don’t use custom properties in shorthand properties](https://css-tricks.com/maybe-dont-use-custom-properties-in-shorthand-properties/) originally published on [CSS-Tricks](https://css-tricks.com), which is part of the [DigitalOcean](https://try.digitalocean.com/css-tricks/?utm%5Fmedium=rss&utm%5Fsource=css-tricks.com&utm%5Fcampaign=family%5F&utm%5Fcontent=) family. You should [get the newsletter](https://css-tricks.com/newsletters/).