I’d call this a bonafide CSS trick, courtesy Lea Verou.
Don’t miss the comments, in which Sérgio Gomes reminds us this might make it easier to change values in JavaScript, because you could skip worrying about prefixes there. Changing CSS variables in JavaScript is already rather appealing, as the changes will disperse throughout wherever they are used naturally.
And Andrea Giammarchi’s trick, where you create a setup that behaves almost like a @mixin with default values:
* {
--box-shadow:
var(--box-shadow-x, 0)
var(--box-shadow-y, 0)
var(--box-shadow-blur) /* no default, required */
var(--box-shadow-radius, 0)
var(--box-shadow-color, black);
box-shadow: var(--box-shadow, initial);
}
p {
--box-shadow-blur: 8px;
}
p.special {
--box-shadow: 10px 0 0 green;
}