Öffnen Sie Requisiten (und benutzerdefinierte Eigenschaften als System)

CSS -benutzerdefinierte Eigenschaften bieten einen einfachen Ansatz für Design -Token: wiederverwendbare Einheiten wie Farben, Schriftarten, Abstand und Timing. Wenn man hauptsächlich auf diese Token stützt, fördert das saubere, konsistente Design - ein Hauptziel in der Webentwicklung. Dieser Ansatz spiegelt die Attraktivität von Frameworks der Versorgungsklasse wider:

Die Popularität von Frameworks der Utility-Klasse ergibt sich aus ihren vorkonfigurierten Klassen, was zu ästhetisch ansprechenden Designs führt. Die begrenzte Auswahl der Werte gewährleistet ein konsistentes, professionelles Aussehen.

Betrachten Sie diese Beispiele: Verwenden vordefinierter Klassen:

<h1 id="Kopfball"> Kopfball</h1>

... ist vergleichbar mit der Verwendung von CSS -benutzerdefinierten Eigenschaften:

 html {
  -Farbton-Primär: Grün;
  -Größe-groß: 3REM;
  / * ... mehr Token */
}

H1 {
  Farbe: var (-Farbprimäre);
  Schriftgröße: var (-Größe groß);
}

Beide bieten Optionen mit Nullbuild. Frameworks wie Tachyons bieten fertige Versorgungskurse an, während Windi einen Just-in-Time-Compiler einsetzt. In ähnlicher Weise bietet Pollen eine vorgefertigte Bibliothek mit benutzerdefinierten Eigenschaften an, und die innovativen offenen Requisiten verwenden einen Just-in-Time-Compiler, um nur gebrauchte Eigenschaften zu enthalten.

Einführung offener Requisiten:

Open Props ist im Wesentlichen eine umfassende Sammlung von CSS -benutzerdefinierten Eigenschaften, die als robuste Grundlage für das Styling dienen. Es betont einen "benutzerdefinierten Eigentums-First" -Ansatz, der die etablierte Praxis von Design-Token mit vordefinierten Optionen widerspiegelt.

Die Parallelen sind klar:

Die attraktiven Standardwerte von Open Props sind wahrscheinlich die Hauptauslosung.

Offene Requisiten beseitigen jedoch nicht die Notwendigkeit, Elemente zu benennen. Sie verwenden immer noch Standard -CSS -Selektoren (ähnlich wie benannte Klassen), um Elemente zu zielen und zu stylen. Der Hauptunterschied besteht darin, die vordefinierten benutzerdefinierten Eigenschaften zu nutzen, anstatt manuell Werte zu erstellen.

Die Core Open Props Library (Quelle verfügbar) wiegt nur 4,4 KB (basierend auf Devtools -Messungen). Dies schließt Ihr benutzerdefiniertes CSS aus, der minimaler Overhead darstellt. Während zusätzliche Proppacks die Größe erhöhen, bleiben sie klein, und die Just-in-Time-Zusammenstellung befasst sich mit den Größenproblemen. Sie können damit auf Stackblitz experimentieren.

Open Props bietet eine überzeugende Lösung. Das Vertrauen in Standard -CSS gewährleistet die zukünftige Kompatibilität und Flexibilität.

Das obige ist der detaillierte Inhalt vonÖffnen Sie Requisiten (und benutzerdefinierte Eigenschaften als System). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!