F(E)utter – CSS Custom Properties

F(E)utter – Denkanstöße zu FE-Themen
Diese Blogreihe soll „Futter“ für das Frontend-Hirn bieten.
Es werden verschiedene Themen wie neue Technologien, Herangehensweisen an Problemstellungen u.ä. angeschnitten. Dabei ist eine Diskussion durchaus gewünscht und wir freuen uns über jeden Input.


CSS-Variablen haben es in den W3C-Draft geschafft! Ist damit die zukünftige Daseinsberechtigung von Sass und Less gefährdet? Schauen wir uns einmal kurz an, was die Spezifikation mit sich bringt!

CSS Variablen, genannt „Custom Properties“, bieten eine Möglichkeit wiederkehrende CSS-Werte abzuspeichern und im weiteren Verlauf der Style-Anweisungen zu referenzieren. Eines der trivialsten Beispiele ist wohl die Speicherung von Theme-Farben.

Wie schaut das im Code aus:

:root {
  --theme-primary: blue;
  --theme-secondary: #696969;
}
.btn-primary {
  background-color: var(--theme-primary);
}
.btn-secondary {
  background-color: var(--theme-secondary);
}

 

Hier werden global verfügbar die Variablen „–theme-primary“ und „–theme-secondary“ definiert und können an jeder Stelle im CSS-Stylesheet benutzt werden.

Variablen können innerhalb jeder Kaskadierungs-Ebene definiert werden und sind in vererbten Ebenen verfügbar. Ein Beispiel:

<div class="nx-component">
  <div class="nx-component__container">
    <h2>Some Headline</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>
<footer>
  <h2>Footer</h2>
</footer>

.nx-component {
  --component-spacing: 50px;
}
.nx-component__container {
  margin-bottom: var(--component-spacing); // 50px
}
footer {
  margin-bottom: var(--component-spacing); // Regel wird ignoriert
}

 

Die „var“-Anweisung kann problemlos genutzt werden, auch wenn eine entsprechende Variable im Kontext nicht verfügbar ist. Eine solche Regel wird ignoriert.

Zusammengefasst

CSS Custom Properties bieten ein wichtiges Werkzeug, um CSS Code besser organisieren zu können. Allerdings ist das erst ein kleiner Teil, den uns in aktuellen Projekten Sass oder Less abnehmen. Andere syntaktischen Elemente, wie Verschachtelung, Schleifen oder if/else-Anweisungen machen CSS zu echtem Coding und ermöglichen saubere CSS-Architekturen.

Ich denke, dass wir mit Custom Properties nur einen ersten Schritt weg von CSS-Präprozessoren gehen. Es sind aber noch viele weitere nötig.

Nun zur Diskussion:

  • Was hältst du von CSS Custom Properties? Top oder Flop?
  • Denkst du, dass CSS mit Sass und Less zukünftig aufschließen kann?

Weiterführende Links

Dokumentation im Mozilla Developer Network
Can I use – Browser-Support

Ein Gedanke zu “F(E)utter – CSS Custom Properties

  1. Ich finde die Entwicklung bei CSS sehr begrüßenswert.
    Danke für den schönen Input.
    Custom Properties werden das Leben als Frontend Engineer an einigen Stellen sicher vereinfachen.
    Dennoch vermute ich dass ein Ablösen von Sass oder Less realistisch ist aber leider noch länger auf sich warten lassen dürfte – alleine wegen dem Browser-Support.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>