Verwendung von benutzerdefinierten Eigenschaften zur Modifizierung von Komponenten

Anstatt benutzerdefinierte Eigenschaften zur Gestaltung ganzer Bereiche einer Webschnittstelle zu verwenden, sollten wir sie meiner Meinung nach zur Anpassung und Modifizierung winziger Komponenten verwenden. Hier ist der Grund.

Immer wenn jemand über CSS-Benutzereigenschaften spricht, spricht er oft über die Fähigkeit, das Erscheinungsbild einer Webschnittstelle mit einem Schlag zu thematisieren. Wenn Sie zum Beispiel bei einer großen Nachrichtenredaktion arbeiten, möchten wir möglicherweise ein bestimmtes visuelles Design für die Finanzabteilung und die Sportabteilung festlegen – Buttons, Header, Zitate und Textfarbe könnten alle im Handumdrehen geändert werden.

Benutzerdefinierte Eigenschaften würden diese Art von Thematisierung einfach machen, da wir jeder Komponente keine Menge von Klassen hinzufügen müssten. Alles, was wir tun müssten, wäre, eine einzelne Variable zu bearbeiten, die sich in :root befindet, und wir können diese benutzerdefinierten Eigenschaften dann mit JavaScript bearbeiten, was wir mit etwas wie Sass-Variablen nicht tun können.

Vor einiger Zeit schrieb Chris in einem Beitrag über benutzerdefinierte Eigenschaften und Thematisierung über diesen Anwendungsfall, und das von ihm gegebene Beispiel sah so aus

:root {
  --mainColor: #5eb5ff;
}

header {
  background: var(--mainColor);
}

footer {
  background: var(--mainColor);
}

Siehe Pen Theming a site with CSS Custom Properties von Chris Coyier (@chriscoyier) auf CodePen.

Aber je mehr ich über das Erstellen großer Systeme mit CSS lerne, desto mehr glaube ich, dass die Änderung globaler Stile wie dieser auf lange Sicht sehr schwierig ist, um den Code sauber und konsistent zu halten. Und wenn Sie an einer großen Webanwendung arbeiten, verwenden Sie wahrscheinlich etwas wie React, bei dem alles aus winzigen wiederverwendbaren Komponenten besteht, insbesondere weil in diesem Maßstab der Kaskadeneffekt unheimlich und gefährlich sein kann.

Wenn wir an größeren, komplexeren Systemen arbeiten, wie sollten wir dann benutzerdefinierte Eigenschaften verwenden? Nun, ich denke, die beste Option ist, sie auf Komponentenebene zu belassen, um unser CSS wirklich sauber zu machen. Anstatt also Variablen zum Root-Element hinzuzufügen, könnten wir sie stattdessen an die Komponente binden, so wie hier

.btn {
  --btnColor: #5eb5ff;
}

Danach könnten wir Eigenschaften wie color oder border so einstellen, dass sie diese Variable verwenden

.btn {
  --btnColor: #5eb5ff;
  border: 1px solid var(--btnColor);
  color: var(--btnColor);
  
  &:hover {
    color: white;
    background-color: var(--btnColor);
  }
}

Bisher so gut! Wir können dann Modifikatorklassen hinzufügen, die einfach den Wert der benutzerdefinierten Eigenschaft ändern

.btn-red {
  --btnColor: #ff6969;
}

.btn-green {
  --btnColor: #7ae07a;
}

.btn-gray {
  --btnColor: #555;
}

Siehe Pen Custom Properties von Robin Rendle (@robinrendle) auf CodePen.

Sieh, wie schön und ordentlich das ist? Mit nur wenigen Zeilen CSS haben wir ein ganzes System von Buttons erstellt – wir könnten die Schriftgröße leicht ändern oder Animationen oder alles andere hinzufügen und unsere Klassen schön und klein halten, ohne den globalen Geltungsbereich unseres CSS zu beeinträchtigen. Insbesondere da all dieser Code wahrscheinlich in einer einzigen Datei wie buttons.scss liegt, ist es hilfreich, dass die gesamte Logik an einem Ort vorhanden ist.

Nun, diese Methode, benutzerdefinierte Eigenschaften auf Komponentenebene zu verwenden, ist sicher nicht so aufregend oder stilvoll wie die Verwendung einer einzigen Variable, um jeden Teil einer Website zu gestalten, aber ich bin mir nicht ganz sicher, wie nützlich diese Art von Thematisierung überhaupt ist. Oft erfordert ein Design viele kleine Anpassungen an jeder Komponente aus Benutzerfreundlichkeitsgründen, sodass es sinnvoll ist, alles auf die Komponentenebene herunterzubrechen.

Was ist Ihrer Meinung nach das Nützlichste an benutzerdefinierten Eigenschaften? Ich würde gerne hören, was jeder über diese Dinge in den Kommentaren unten denkt.