CSS Custom Properties vs. Sass Schleifen?

Ich vermute, dass viele unserer Verwendungen von Sass-Maps durch CSS Custom Properties ersetzt werden können – aber hören Sie mir kurz zu.

Beim Designen von Komponenten müssen wir oft die gleiche Struktur einer Komponente verwenden, aber deren Hintergrund- oder Textfarbe ändern, basierend auf einem Theme. Zum Beispiel könnten wir bei einer Benachrichtigung einen Warnstil, einen Stil für Fehler und einen Stil für Erfolg benötigen – jeder davon könnte sich *leicht* unterscheiden, wie hier

Es gibt ein paar Möglichkeiten, wie wir dies mit CSS angehen könnten, und wenn Sie mich vor ein paar Jahren gefragt hätten, hätte ich versucht, dieses Problem mit Sass-Maps zu lösen. Zuerst hätte ich mit den Basis-Benachrichtigungsstilen begonnen, dann hätte ich eine Map erstellt, die alle Daten enthält

$alertStyles: (
  error: (
    theme: #fff5f5,
    icon: 'error.svg',
    darkTheme: #f78b8b
  ),
  success: (
    theme: #f0f9ef,
    icon: 'success.svg',
    darkTheme: #7ebb7a
  ),
  warning: (
    theme: #fff9f0,
    icon: 'warning.svg',
    darkTheme: #ffc848
  )
);

Dann können wir diese Daten durchlaufen, um unsere Kern-Benachrichtigungsstile zu ändern, wie hier

@each $state, $property in $alertStyles {
  $theme: map-get($property, theme);
  $darkTheme: map-get($property, darkTheme);
  $icon: map-get($property, icon);
  
  .alert-#{$state} {
    background-color: $theme;
    border-color: $darkTheme;  
    &:before {
      background-color: $darkTheme;
      background-image: url($icon);
    }
    .alert-title {
      color: $darkTheme;
    }
  }
}

Ziemlich kompliziert, was? Dies würde Klassen wie .alert-error, .alert-success und .alert-warning ausgeben, die jeweils eine Menge CSS enthalten, das die Standard-Benachrichtigungsstile überschreibt.

Das würde uns mit etwas zurücklassen, das wie diese Demo aussieht

Sieh dir den Pen
Alerts – Sass Loops von Robin Rendle (@robinrendle) an
auf CodePen.

Allerdings! Ich habe immer festgestellt, dass die Verwendung von Sass-Maps und das Durchlaufen all dieser Daten unhandlich und außerordentlich schwer zu lesen sein können. In neueren Projekten bin ich auf fantastisch komplizierte Verwendungen von Maps gestoßen und habe die Datei langsam geschlossen, als wäre ich in eine Tatortszene geraten.

Wie halten wir den Code einfach und leserlich? Nun, ich denke, dass CSS Custom Properties diese Art von Schleifen viel einfacher zu lesen und daher leichter zu bearbeiten und in Zukunft zu refaktorieren macht.

Nehmen wir das obige Beispiel und refaktorieren es so, dass stattdessen CSS Custom Properties verwendet werden. Zuerst legen wir die Kernstile für die .alert-Komponente fest, wie folgt

Sieh dir den Pen
Alerts – Custom Variables 1 von Robin Rendle (@robinrendle) an
auf CodePen.

Während wir diese Basisstile erstellen, können wir Variablen in unserer .alert-Klasse wie folgt festlegen

.alert {
  --theme: #ccc;
  --darkTheme: #777;
  --icon: '';
  background: var(--theme);
  border: 1px solid var(--darkTheme);
  /* other styles go here */
  
  &:before {
    background-image: var(--icon);
  }
}

Mit CSS Custom Properties können wir weit mehr tun, als nur eine Benutzeroberfläche in einen Darkmode oder ein Theme zu ändern. Ich wusste nicht, bis ich es ausprobiert habe, dass man ein Bild auf diese Weise in einer benutzerdefinierten Eigenschaft festlegen kann – ich ging einfach davon aus, dass es nur für Hex-Werte ist.

Nun denn! Von dort aus können wir jede benutzerdefinierte .alert-Klasse wie .alert-warning gestalten, indem wir diese Eigenschaften in .alert überschreiben

.alert-success {
  --theme: #f0f9ef;
  --darkTheme: #7ebb7a;
  --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/success.svg);
}

.alert-error {
  --theme: #fff5f5;
  --darkTheme: #f78b8b;
  --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/error.svg);
}

.alert-warning {
  --theme: #fff9f0; 
  --darkTheme: #ffc848;
  --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/warning.svg);
} 

Und das war's schon! Wir erhalten genau die gleiche visuelle Benutzeroberfläche wie bei einer Sass-Schleife

Sieh dir den Pen
Alerts – Custom Variables 2 von Robin Rendle (@robinrendle) an
auf CodePen.

Allerdings! Ich denke, hier gibt es eine enorme Verbesserung in Bezug auf die Lesbarkeit. Es ist viel einfacher, diesen Code zu betrachten und sofort zu verstehen. Bei der Sass-Schleife scheint es fast so, als würden wir versuchen, viele clevere Dinge an einem Ort zu tun – nämlich, Klassen in andere Klassen einzubetten und die Klassennamen selbst zu erstellen. Ganz zu schweigen davon, dass wir dann zwischen der ursprünglichen Sass-Map und unseren Stilen hin und her wechseln müssen.

Mit CSS Custom Properties sind alle Stile innerhalb des ursprünglichen .alert enthalten.

Da haben Sie es! Ich denke, es gibt nicht viel zu erwähnen, außer der Tatsache, dass CSS Custom Properties den Code in Zukunft lesbarer und wartbarer machen können. Und ich schätze, das ist etwas, worüber wir uns alle ein wenig freuen sollten.

Obwohl es noch eine letzte Sache gibt: Wir sollten uns beim Arbeiten mit Custom Properties wahrscheinlich der Browserunterstützung bewusst sein, obwohl diese im Großen und Ganzen ziemlich gut ist.