Wie nennt man Farbvariablen?

Welches Namensschema verwenden Sie für Farbvariablen?
Haben Sie es geschafft, CSS zu schreiben, das Farbvariablen so verwendet, dass sie von den Farben, die sie darstellen, unabhängig sind?
Ich habe all das Folgende ausprobiert und es bisher nicht geschafft, CSS zu schreiben, das mit jedem Farbschema gut funktioniert. ☹️

— Lea Verou (@LeaVerou) 14. Oktober 2018

Ich erinnere mich an das allererste Mal, als ich Sass für ein Projekt ausprobiert habe. Das Erste, was ich tun wollte, war, meine Farben zu variabilisieren. Von meinen Fähigkeiten im Benennen von Dingen in HTML wusste ich, dass ich Klassen wie .header-blue-left-bottom vermeiden sollte, da sich die Farbe und Position dieses Elements ändern könnten. Es ist besser für das Element, es so zu beschreiben, was es ist, als wie es aussieht.

Also habe ich versucht, meine Farben semantisch zu benennen, in einem gewissen Sinne — was sie repräsentieren, nicht was sie buchstäblich sind

$mainBrandColor: #F060D6;
$secondaryFocus: #4C9FEB;
$fadedHighlight: #F1F3F4;

Aber ich stellte fest, dass ich sie mir absolut nie gemerkt habe und ständig nachsehen musste, wo ich sie definiert hatte, um sie zu verwenden. Später, in einem „Scheiß drauf“-Moment, habe ich Farben eher so genannt…

$orange: #F060D6;
$red: #BB532E;
$blue: #4C9FEB;

$gray-1: #eee;
$gray-2: #ccc;
$gray-3: #555;

Das fand ich viel intuitiver mit wenigen, wenn überhaupt negativen Nebenwirkungen. Schließlich ist das hier keine Überschreitung der HTML-CSS-Grenze; das ist alles innerhalb von CSS und nur für Entwickler sichtbar, was dem Problem einen engeren Geltungsbereich gibt.

Auf ähnliche Weise habe ich versucht, Farben innerhalb einer Sass-Map zu halten, wie zum Beispiel

$colors: (
  light: #ccc,
  dark: #333
);

Aber das einzige vage Ziel war, den globalen Namespace aufzuräumen, was wahrscheinlich nicht den Aufwand wert ist, ständig map-get verwenden zu müssen. Namespacing wie $-c-orange ist wahrscheinlich ein einfacherer Ansatz, wenn überhaupt etwas getan werden muss.

Ich bin heute in Sass weitgehend bei diesem Ansatz geblieben, einfach Farbnamen zu verwenden. Da sich die Entwicklung hin zu CSS Custom Properties verschiebt, halte ich es für ähnlich angemessen, ein --c-orange und --c-gray-5 zu haben.

:root {
  -c-orange: #F060D6;
  -c-red: #BB532E;
  -c-blue: #4C9FEB;

  -c-gray-1: #eee;
  -c-gray-2: #ccc;
  -c-gray-3: #555;
}

Man könnte mit diesen Namen etwas spezifischer werden, während man abstrakt bleibt, wie Marcus Ortense sagt

$color-primary:
$color-primary-dark:
$color-primary-light: 

Und Variationen zu jeder Basis, wie Mike Street sagt

$primary:
$primaryLight: 
$primaryDark:

$secondary:
$secondaryLight:
$secondaryDark:

$neutralDarker:
$neutralDark:
$neutral:
$neutralLight:
$neutralLighter: 
$neutralLightest: 

Silvestar Bistrović hat kürzlich über die Verwendung abstrakter griechischer Nummerierung geschrieben

$color-alpha: #12e09f;
$color-beta: #e01258;
$color-gamma: #f5f5f5;
$color-psi: #1f1f1f;
$color-omega: #fff;

Ich habe diese Art von Dingen schon einmal für Media-Query-Breakpoints verwendet, da die Nummerierung dort Sinn zu ergeben scheint (d.h. niedrige Zahlen sind kleinere Bildschirme, große Zahlen sind größere Bildschirme). Ich könnte mir auch vorstellen, dass das für Tönungen oder Schattierungen derselben Farbe schön wäre, aber warum dann nicht normale Zahlen?

Ein weiterer Ansatz, den ich oft gesehen habe, ist die Kombination von Farbnamen mit abstrakten Namen. Geoff macht das und John Carroll listet das hier auf

$color-danube: #668DD1;
$color-cornflower: $6195ED;
$color-east-bay: $3A4D6E;

// theme1.scss
$color-alpha: $color-danube;
$color-bravo: $color-cornflower;
$color-charlie: $color-east-bay;

// theme2.scss
$color-alpha: $color-cornflower;
$color-bravo: $color-danube;
$color-charlie: $color-east-bay;

Das kann so wortreich werden, wie man es braucht, sogar mit Hinzufügen von Variationen beim Aufrufen aus der Palette.

$table-row-background: lighten($color-background, 10%);

Stuart Robson wird sogar ein bisschen BEM-mäßig mit den Namen, einschließlich des Namespaces

$ns-color__blue—dark: rgb(25,25,112); 
$ns-brand__color—primary: $ns-color__blue—dark;

// component.scss
$ns-component__color—text: $ns-brand__color—primary;

Material Design verwendet Werte, die font-weight ähneln! Das bedeutet, dass Sie mit etwas wie einem Basisbereich plus Alternativen enden würden

$light-green-100:
$light-green-200:
$light-green-300:
// etc
$light-green-900:
$light-green-A200:
$light-green-A400:

$deep-purple-100:
$deep-purple-200:
$deep-purple-300:
// etc
$deep-purple-A900:

Wie können Sie Namen für Farben wählen? Möglicherweise finden Sie es amüsant zu entscheiden, wie man einen sonnigen Gelbton von einem Sonnenblumen-Gelbton nennt, oder Sie möchten einfach nur Hilfe. Hier ist ein Projekt dafür, und hier ist ein weiteres

Siehe den Stift Color Namer von Maneesh (@maneeshc) auf CodePen.

Es gibt sogar ein Sublime Text-Plugin zur Konvertierung (in jede beliebige Syntax)

Und da wir gerade beim Thema Benennung sind

• Arbeit an besserer Namensgebung
• Namensgebung wird immer schwieriger
• Namen für Media Queries