Da CSS Custom Properties nun existieren, können alle Wertteile individuell geändert werden 

In CSS haben einige Eigenschaften Kurzformen. Eine Eigenschaft, die getrennte Werte annimmt. Syntaktischer Zucker, wie man so schön sagt, um das Erstellen zu erleichtern. Nehmen Sie `transition`, das könnte etwa so aussehen

.element {
  transition: border 0.2s ease-in-out;
}

Wir hätten es auch so schreiben können

.element {
  transition-property: border;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

Jeder „Teil“ des Kurzformwerts hat seine eigene Eigenschaft, der er zugeordnet ist. Aber das gilt nicht für alles. Nehmen wir `box-shadow`

.element {
  box-shadow: 0 0 10px #333;
}

Das ist keine Kurzform für andere Eigenschaften. Es gibt kein `box-shadow-color` oder `box-shadow-offset`.

Hier kommen Custom Properties ins Spiel und retten uns!

Wir könnten es so einrichten

:root {
  --box-shadow-offset-x: 10px;
  --box-shadow-offset-y: 2px;
  --box-shadow-blur: 5px;
  --box-shadow-spread: 0;
  --box-shadow-color: #333;
}

.element {
  box-shadow:
    var(--box-shadow-offset-x)
    var(--box-shadow-offset-y)
    var(--box-shadow-blur)
    var(--box-shadow-spread)
    var(--box-shadow-color);
}

Vielleicht etwas langatmig, aber es erfüllt seinen Zweck.

Nachdem wir das getan haben, denken Sie daran, dass wir einige einzigartig coole Dinge bekommen

1. Wir können einzelne Werte mit JavaScript ändern. Zum Beispiel

   document.documentElement.style.setProperty("--box-shadow-color", "green");

2. Nutzen Sie die Kaskade, wenn nötig. Wenn wir `<code>--box-shadow-color: blue auf einem Selektor setzen, der spezifischer ist als `:root`, überschreiben wir diese Farbe.

Fallback-Optionen sind ebenfalls möglich, falls die Variable gar nicht gesetzt ist

.element {
  box-shadow:
    var(--box-shadow-offset-x, 0)
    var(--box-shadow-offset-y, 0)
    var(--box-shadow-blur, 5px)
    var(--box-shadow-spread, 0)
    var(--box-shadow-color, black);
}

---

Wie sieht es mit Transforms aus? Die sind unterhaltsam, weil sie eine durch Leerzeichen getrennte Liste von Werten annehmen, sodass jeder davon eine benutzerdefinierte Eigenschaft sein könnte

:root {
  --transform_1: scale(2);
  --transform_2: rotate(10deg);
}

.element{
  transform: var(--transform_1) var(--transform_2);
}

---

Was ist mit Elementen, die zwar individuelle Eigenschaften für ihre Kurzform haben, aber auch durch Kommas getrennte Mehrfachwerte anbieten? Ein weiterer großartiger Anwendungsfall

:root {
  --bgImage: url(basic_map.svg);
  --image_1_position: 50px 20px;
  --image_2_position: bottom right;
}

.element {
  background: 
    var(--bgImage) no-repeat var(--image_1_position),
    var(--bgImage) no-repeat var(--image_2_position);
}

Oder Übergänge?

:root {
  --transition_1_property: border;
  --transition_1_duration: 0.2s;
  --transition_1_timing_function: ease;
  
  --transition_2_property: background;
  --transition_2_duration: 1s;
  --transition_2_timing_function: ease-in-out;
}

.element {
  transition: 
    var(--transition_1_property) 
    var(--transition_1_duration) 
    var(--transition_1_timing_function),
    var(--transition_2_property) 
    var(--transition_2_duration) 
    var(--transition_2_timing_function),
}

Dan Wilson hat kürzlich diese Art von Ding mit Animationen verwendet, um zu zeigen, wie einzelne Animationen pausiert werden können!

---

Hier ist die Browserunterstützung