Farbthemen mit CSS -benutzerdefinierten Eigenschaften und Rückenwind

CSS -benutzerdefinierte Eigenschaften verbessern nicht nur die Code -Effizienz, sondern schaffen auch mehr Möglichkeiten in CSS, insbesondere im Themendesign. Das Atomic Smash -Team verwendet Rückenwind -CSS (ein Rahmen der Utility -Klasse). In diesem Artikel wird untersucht, wie benutzerdefinierte Eigenschaften für das Themendesign verwendet werden und wie Sie ihn in den Tailwind integrieren, um die Wiederverwendbarkeit Ihres Codes zu maximieren. In diesem Artikel wird die Einführung in den Rückenwind nicht erläutert. Bitte überprüfen Sie die offizielle Dokumentation. Selbst wenn Sie neu im Rückenwind sind, finden Sie möglicherweise einige Tipps nützlich.

Themenübersicht

Angenommen, wir haben eine "CTA" -Komponente, die Titel, Körper und Schaltflächen enthält.

Das Schreiben eines regulären CSS (Nicht-Schwanzwind) für dieses Farbschema sieht Folgendes aus:

 <code>.cta { background-color: #742a2a; // 深红色 color: #ffffff; // 白色}  .cta__heading { background-color: #e53e3e; // 中等红色 color: #742a2a; } .cta__button { background-color: #e53e3e; }</code>

Mit Rückenwind werden wir diese Farben als Dienstprogrammklassen in HTML anwenden:

<code><div>
<h3 id="Treten-Sie-unserer-Mailingliste-bei">Treten Sie unserer Mailingliste bei</h3>
<div>
<p>Lassen Sie die Ersten unsere neuen Produkte kennenlernen</p>
  registrieren</div>
</div></code>

Ich habe absichtlich Klassen ausgelassen, die nicht mit dem Grundfarbschema zusammenhängen, aber Sie können das vollständige Beispiel in dieser Demo sehen:

Wenn wir nun ein anderes Farbschema auf unsere Komponente anwenden möchten, müssen wir den Farbwert der ursprünglichen Komponente überschreiben. In Ermangelung von Rückenwind besteht ein gemeinsamer Ansatz darin, die Themenklasse selbst an die Komponente selbst zu befestigen und den Farbwert in der Kaskade neu zu definieren. Für Komponenten mit der Modifikatorklasse ".CTA-Blue" (unter Verwendung der BEM Convention) werden wir den CSS-Wert des blauen Farbschemas anwenden:

 <code>.cta--blue { background-color: #2a4365; // 深蓝色} .cta--blue .cta__heading { background-color: #3182ce; // 中等蓝色 color: #2a4365; } .cta--blue .cta__button { background-color: #3182ce; }</code>

Wenn wir SASS oder andere Präprozessoren verwenden, können wir Variablen verwenden, um unsere Arbeit zu vereinfachen, und wir können .CTA__ -Heading und .CTA__Body -Selektoren nisten. Es macht unseren Code nicht prägnanter, aber durch Aktualisierung dieser Werte an einem Ort wird der Code besser verwaltbar.

Angenommen, wir haben 10 verschiedene Farbschemata, wie ich in letzter Zeit in einem Projekt erlebt habe. Unser Code beginnt länger, da wir das obige Beispiel 10 -mal im Grunde wiederholt haben, bevor wir diese Farbwerte ändern. Stellen Sie sich nun vor, dass jede Komponente in unserem Designsystem 10 Farbschemata benötigt und viele Komponenten viel komplexer sind als unser einfaches CTA. Vielleicht braucht unser Thema auch unterschiedliche Schriftarten. Plötzlich müssen wir viele CSS schreiben.

Verwenden Sie Rückenwind für Themendesign

Auf der anderen Seite müssen wir, wenn wir Rückenwind verwenden, mehrere Klassen in der HTML selbst ändern. Auch wenn wir JavaScript -Frameworks (wie React oder Vue) verwenden, ist dies keine leichte Aufgabe. Um sicherzustellen, dass unbenutzte Stile in Produktionsversionen entfernt werden, entmutigt Rückenwind die Verwendung von String -Verkettung, um Klassennamen (zum Zeitpunkt des Schreibens) zu erstellen. Das Aufbau unserer Themen bedeuten daher möglicherweise, unseren Komponenten viel Logik hinzuzufügen.

Verwenden Sie benutzerdefinierte Eigenschaften für Themendesign

Durch die Verwendung benutzerdefinierter Eigenschaften für unsere Farbthemen können wir die Menge an Code, die geschrieben werden muss, drastisch reduzieren und die Wartungsbelastung reduzieren. Schauen wir uns zunächst an, wie das in regulärem CSS geht.

Wir definieren das benutzerdefinierte Attribut als: eine Variable auf dem Stammauswahl, was es zu einer globalen Variablen macht. (Der Körperwahlkörper gilt auch.) Wir können diese Variablen dann verwenden, um den Farbattributwert im Selektor zu ersetzen:

 <code>:root { --primary: #742a2a; // 深红色 --secondary: #e53e3e; // 中等红色} .cta { background-color: var(--primary); color: white; } .cta__heading { background-color: var(--secondary); color: var(--primary); } .cta__button { background-color: var(--secondary); }</code>

Hier ist es wirklich magisch: Erstellen Sie nun Code für jedes Thema, erfordert nur die Aktualisierung dieser benutzerdefinierten Attributwerte. Egal wo wir die Themenklasse anwenden, der neue Wert wird vererbt:

 <code>.th-blue { --primary: #2a4365; // 深蓝色 --secondary: #3182ce; // 中等蓝色}</code>

Wenn wir ein blaues Farbschema wollen, können wir die .Th-Blue-Klasse auf die Komponente anwenden und sogar in Verwenden Sie es auf dem Tag, um das Seitenthema anzuwenden, und überschreiben Sie es dann bei Bedarf auf einzelnen Komponenten. Die Verwendung von Dienstprogrammklassen kann uns mehr des Codes-Schreibaufwands sparen als Komponenten-spezifische Klassen (wie .CTA-Blue im Originalcode), da er überall in unserer Codebasis angewendet werden kann.

Legacy Browser behandeln

Wie viele Agenturen benötigen viele Atomic Smash -Kunden immer noch unsere Unterstützung für Internet Explorer 11. Während ich in den meisten Fällen progressive Verbesserungsmethoden akzeptieren kann (z. B. ein einfacheres Fallback -Layout für Browser, die CSS -Raster nicht unterstützen), fand ich das Design -Design, der normalerweise keine einfachen Kompromisse zulässt. Kunden möchten ihre Markenfarben und Schriftarten auch in älteren Browsern sehen. Die Bereitstellung eines Fallbacks mit einer Feature -Abfrage erfordert viel zusätzliche Arbeit, wodurch die Vorteile der Verwendung benutzerdefinierter Eigenschaften ausgleichen. Um dieses Problem zu überwinden, brauchen wir eine Polyfill.

Es gibt verschiedene Optionen, um Polyfill für benutzerdefinierte Eigenschaften im IE 11 bereitzustellen.

Postcss-Custom-Properties

Die erste besteht darin, ein Postcss-Plugin namens POSSS-Custom-ProPerties zu verwenden. Wenn Sie bereits Postcss in Ihrem Workflow verwenden, ist das Hinzufügen dieses Plugins ziemlich einfach. Es funktioniert, indem Sie Ihr CSS verarbeiten und das Ergebnis der Variablen als Eigenschaftswerte ausgeben. Also, wenn Sie das folgende CSS haben:

 <code>:root { --color: red; } h1 { color: var(--color); }</code>

Das Ergebnis nach der Verarbeitung wird:

 <code>h1 { color: red; color: var(--color); }</code>

Browser, die keine benutzerdefinierten Eigenschaften unterstützen, ignorieren die zweite Regel und greifen auf den regulären Immobilienwert zurück. Es besteht auch die Möglichkeit, Regeln mit benutzerdefinierten Eigenschaften aus der Ausgabe zu entfernen, sodass die Dateigröße kleiner ist. Dies bedeutet, dass kein Browser benutzerdefinierte Eigenschaften erhält - es ist ein Problem, wenn Sie Variablen dynamisch aktualisieren -, aber Sie können sie für statische Werte in Ihrem Code ohne nachteilige Auswirkungen verwenden.

Leider hat diese Polyfill einige Einschränkungen:

1. Sie müssen eine Datei (oder Datei) angeben, die benutzerdefinierte Eigenschaften in der Konfiguration definiert.
2. Benutzerdefinierte Eigenschaften können nur auf dem Root -Selektor definiert werden.

Die erste Grenze ist relativ trivial, aber die zweite macht diese Polyfonie leider völlig nutzlos für unsere Anwendungsfälle für Themen Design. Dies bedeutet, dass wir Variablen im Selektor nicht neu definieren können, um unser Thema zu erstellen.

IE11CustomProperties

Diese Polyfill -Option umfasst die Bereitstellung von Client -Skripten anstelle der Vorverarbeitung CSS. Wir können unserem Kopf das folgende Skript hinzufügen, um sicherzustellen, dass Polyfill nur in IE 11 geladen wird:

 <code>window.MSInputMethodContext && document.documentMode && document.write('');</code>

Dies ermöglicht es uns, die benutzerdefinierten Eigenschaften wie im Beispiel hier zu nutzen. Dies ist also die Lösung, für die ich mich entschieden habe. Es hat eine Einschränkung, dass benutzerdefinierte Eigenschaften, die im Style -Attribut festgelegt sind, nicht polyfillt werden. Aber ich habe es an dem obigen Beispiel für Themendesign getestet und es funktioniert einwandfrei.

Aber was hat das mit Rückenwind zu tun?

Wie wir gesehen haben, können Utility-Kurse-einzwecke Klassen, die überall in HTML angewendet werden können-unseren Code wiederverwendbarer machen. Dies ist das Hauptverkaufsargument von Rückenwind und anderen Rahmenbedingungen für Utility -Klassen - die Größe der von Ihnen lieferenden CSS -Datei wird infolgedessen schließlich kleiner. Tailwind bietet mehrere Farbkurse: .BG-rot-Medium bietet uns den roten Eigenschafts-Eigenschaftswert, .Text-red-medium ist für Farbe usw. für Rand, Box-Shadow oder überall, wo Sie sich vorstellen können, wo Farbwerte benötigt werden können.

Farben können in der Konfigurationsdatei definiert werden:

 <code>module.exports = { theme: {  colors: {   red: {    medium: '#e53e3e',    dark: '#742a2a'   },   blue: {    medium: '#3182ce',    dark: '#2a4365'   }  } } }</code>

Wenn wir benutzerdefinierte Eigenschaftswerte für unsere Rückenwindklasse verwenden möchten, können wir diese in der Konfiguration angeben:

 <code>module.exports = { theme: {  colors: {   'th-primary': 'var(--primary)',   'th-secondary': 'var(--secondary)'  } } }</code>

Ich habe die Namen der Fachklassen vorangestellt, sodass es offensichtlich ist, dass sie für das Subjektdesign besonders relevant sind. Sie können jedoch gerne jede Konvention verwenden, die zu Ihnen passt.

Jetzt können wir diese Klassen durch Rückenwind verwenden. Die Verwendung von .bg-Th-Primary entspricht dem Schreiben:

 <code>.some-element { background-color: var(--primary); }</code>

In unserem CSS können wir benutzerdefinierte Eigenschaften des Themas wie zuvor definieren:

 <code>:root { --primary: #742a2a; --secondary: #742a2a; } .th-blue { --primary: #2a4365; --secondary: #3182ce; }</code>

Wenden wir diese Klassen auf unsere HTML an. Das erste Beispiel bietet uns eine Komponente mit einem Standardthema (Variablen definiert auf: root). Der zweite hat unser blaues Thema. Der einzige Unterschied besteht darin, dass der Komponente der. Die blaue Klasse hinzugefügt wurde. (Einfachheit und Klarheit habe ich Klassen weggelassen, die nicht mit dem Thema zusammenhängen.)

<code><div class="bg-th-primary text-white">
<h3 id="Treten-Sie-unserer-Mailingliste-bei">Treten Sie unserer Mailingliste bei</h3>
<div>
<p>Lassen Sie die Ersten unsere neuen Produkte kennenlernen</p>
<button class="bg-th-secondary">registrieren</button>
</div>
</div>


<div class="th-blue bg-th-primary text-white">
<h3 id="Treten-Sie-unserer-Mailingliste-bei">Treten Sie unserer Mailingliste bei</h3>
<div>
<p>Lassen Sie die Ersten unsere neuen Produkte kennenlernen</p>
<button class="bg-th-secondary">registrieren</button>
</div>
</div></code>

Verwenden Sie Konfiguration als Style -Handbuch

Tailwind ermutigt Sie, alle Variablen in Ihrer Konfiguration zu definieren, und persönlich stimme ich zu, dass dies ein besserer Ansatz ist. Dies bedeutet, dass die Konfigurationsdatei eher eine einzige Quelle der Tatsachenquelle sein kann, anstatt (wahrscheinlich) mit mehreren Orten, um die Farbe und andere Themenwerte zu definieren. Glücklicherweise können wir auch die Werte in der Tailwind -Konfigurationsdatei für unsere benutzerdefinierten Eigenschaften verwenden. Wir müssen zunächst alle Farben in der Konfiguration definieren (vorausgesetzt, wir verwenden nicht die Standardpalette, die von Rückenwind enthalten ist):

 <code>module.exports = { theme: {  colors: {   red: {    medium: '#e53e3e',    dark: '#742a2a'   },   blue: {    medium: '#3182ce',    dark: '#2a4365'   },   'th-primary': 'var(--primary)',   'th-secondary': 'var(--secondary)'  } } }</code>

Dann können wir in CSS auf das Themenobjekt zugreifen:

 <code>:root { --primary: theme('colors.red.dark'); --secondary: theme('colors.red.medium'); } .th-blue { --primary: theme('colors.blue.dark'); --secondary: theme('colors.blue.medium'); }</code>

Zusammenfassen

Ich freue mich sehr, benutzerdefinierte Eigenschaften zu verwenden, ohne mir Sorgen um den Browserunterstützung zu machen, und ich freue mich noch mehr, es nahtlos in unsere vorhandenen Workflows integrieren zu können. Es ist schwer, die Zeit zu übertreiben, die sie in Bezug auf das Themendesign retten werden. Ich hoffe, dass dieser Artikel Sie auch dann dazu ermutigen kann, benutzerdefinierte Eigenschaften für diesen Anwendungsfall zu versuchen, selbst wenn Sie kein Wirdwind -Benutzer sind.

Das obige ist der detaillierte Inhalt vonFarbthemen mit CSS -benutzerdefinierten Eigenschaften und Rückenwind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!