Open Props (und Custom Properties als System)

Vielleicht die grundlegendste und offensichtlichste Verwendung von CSS-Custom-Properties sind Design-Tokens. Farben, Schriftarten, Abstände, Timings und andere atomare Designelemente, die Sie beim Entwerfen einer Website verwenden können. Wenn Sie *fast ausschließlich* Werte aus Design-Tokens beziehen, steuern Sie auf ein sauberes Design und diesen konsistenten professionellen Look zu, der typischerweise das Ziel im Webdesign ist. Tatsächlich habe ich geschrieben, dass ich glaube, dass es genau das ist, was zur Popularität von Utility-Class-Frameworks beiträgt.

Ich würde argumentieren, dass ein Teil dieser Popularität dadurch angetrieben wird, dass, wenn man aus diesen vorkonfigurierten Klassen wählt, das Design ziemlich gut wird. Man kann nicht vom Kurs abkommen. Man wählt aus einer begrenzten Auswahl von Werten, die so gestaltet wurden, dass sie gut aussehen.

Ich sage das (mit einem Stylesheet, das diese Klassen als Tokens für einen Styling-Job definiert)

<h1 class="color-primary size-large">Header<h1>

…ist ein ähnlicher Nutzen wie dieser

html {
  --color-primary: green;
  --size-large: 3rem;
  /* ... and a whole set of tokens */
}

h1 {
  color: var(--color-primary);
  font-size: var(--size-large);
}

Es gibt von beiden auch Zero-Build-Versionen. Zum Beispiel ist Tachyons ein "ist, was es ist"-Stylesheet mit einer Fülle von Utility-Klassen, die man einfach verwendet, während Windi ein ganzes schickes Ding mit einem Just-in-Time-Compiler und dergleichen ist. Pollen ist eine "ist, was es ist"-Bibliothek von Custom Properties, die man einfach verwendet, während das brandneue Open Props einen Just-in-Time-Compiler hat, um nur die verwendeten Custom Properties auszuliefern.

Richtig, also, Open Props!

Das Ganze ist buchstäblich nur ein ganzer Haufen von CSS-Custom-Properties, die man zum Gestalten von Dingen verwenden kann. Es ist wie ein massiver Ausgangspunkt für seine Stile. Es sagt *Custom Property all the things*, aber auf die Art und Weise, wie wir es bereits mit Design-Tokens kennen, bei denen es eine begrenzte, vordefinierte Anzahl von Auswahlmöglichkeiten gibt.

Die Analogien sind für die Leute klar

Open Props: Eine neue CSS-Bibliothek vom großartigen @argyleink.

Es ist Tailwind, aber mit CSS-Variablen.https://#/21pxE2bjW7

— David East (@_davideast) 1. Dezember 2021

Mein Tipp ist, dass die schönen Standardwerte die Leute anziehen werden.

30 wunderschöne, handgefertigte Farbverläufe, so einfach zu verwenden wie `var(–gradient-1)`https://#/LISp4eoeS1 pic.twitter.com/d7Tr113nRI

— Adam Argyle (@argyleink) 1. Dezember 2021

Was es *nicht* tut, ist, Sie davon abzuhalten, Dinge benennen zu müssen, was etwas ist, das Utility-Class-Liebhaber bekanntermaßen genießen. Hier müssen Sie weiterhin normale CSS-Selektoren verwenden (wie bei benannten Klassen), um Dinge auszuwählen und sie so zu stylen, wie Sie es "normalerweise" tun würden. Aber anstatt Ihre eigenen Werte von Hand zu erstellen, greifen Sie Werte aus diesen Custom Properties.

Das gesamte Basis-Ding (Sie können die Quelle hier einsehen) wiegt 4,4 KB über die Leitung (zumindest zeigten das meine DevTools). Das beinhaltet nicht das CSS, das Sie zum Verwenden der Custom Properties schreiben, aber es ist ein ziemlich geringer Overhead. Es gibt zusätzliche PropPacks, die die Größe erhöhen (aber sie sind auch *super* winzig), und wenn Sie sich Sorgen um die Größe machen, dafür ist das Just-in-Time-Ding da. Sie können damit auf StackBlitz herumspielen.

Scheint ziemlich gut zu sein für mich! Ich würde es benutzen. Ich mag, dass es letztendlich nur normales CSS ist, also gibt es nichts, was man nicht tun kann. Man wird gut damit fahren, wie sich CSS entwickelt.