Umgang mit Variablen (Custom-Properties)

[sascha-mueller]

Bei einem Gespräch zum Thema Custom-Properties ist aufgefallen, dass es hier nun Abstimmungsbedarf geben könnte.

Meine Vorstellung wäre folgende:

1. Alles was als Custom-Properties funktioniert, bitte so umsetzen.
   Das wäre erstmal alles, bis auf Angaben in Media Queries. Also: Farben, Borderbreiten, Animationswerte, ... Alles, dass ich an mehreren Stellen nutzen will und global definieren möchte.
   Genau so habe ich das bisher auch in variables/_name-it.scssgelöst.
2. Componenten Variablen am Anfang einer Komponente (eines Moduls).
   So könnte die globale Variable --border-color (oder --border-color-md und --border-color-lg) in jedem Modul via --component-border-color: var(--border-color); definiert sein und in der Componente könnte man --component-border-color an 3,5, 11 Stellen eingesetzt werden.
   Ändern muss ich diese aber nur einmal global, oder wenn in einer Komponente abweichend dort einmal --component-border-color: ....;.
3. Nicht nur eine variables.scss
   Persönlich bin ich ein Freund davon die Variablen in Dateien zu gruppieren und Farben nicht mit Borderbreiten in eine Datei zu schreiben. So hab ich dies bisher auch gelöst. Aber, vermutlich werde ich mich davon verabschieden können, da diese Sicht spätestens seit Custom-Properties in der Minderheit zu sein scheint.

Ich bin gespannt auf eure Meinung.
Feuer Frei :-)

[zoglo]

Meine Meinung: Nicht alles muss als Custom Property zur Verfügung stehen, kann es aber.

Der Vorteil es in einer Datei und unter einem root: {} zu machen liegt darin, dass es im Browser direkt einsehbar ist. Werden diese custom properties nun über mehrere Dateien hinweg eingebunden, so lässt es sich bspw. in der Entwicklerkonsole des Browsers nicht direkt einsehen (Da es über mehrere :root{} aufgeteilt wird).

Bin also bei einer Datei anstatt es in die Komponenten zu verlagern. Sinn macht dies für SCSS-Variablen, da diese kompiliert werden und nicht im CSS auftauchen.

[zoglo]

We could add custom properties for cases that make sense to improve our development process, we should not determine that just for the sake of making it easier to customize for others.