Ich würde das als einen echten CSS-Trick bezeichnen, courtesy Lea Verou.
Verpassen Sie nicht die Kommentare, in denen Sérgio Gomes daran erinnert, dass dies das Ändern von Werten in JavaScript erleichtern könnte, da Sie sich dort keine Gedanken über Präfixe machen müssten. Das Ändern von CSS-Variablen in JavaScript ist bereits recht ansprechend, da sich die Änderungen natürlich dort verbreiten, wo sie verwendet werden.
Und Andrea Giammarchis Trick, bei dem Sie ein Setup erstellen, das sich fast wie ein @mixin mit Standardwerten verhält
* {
--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;
}