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>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; // 深藍(lán)色} .cta--blue .cta__heading { background-color: #3182ce; // 中等藍(lán)色 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; // 深藍(lán)色 --secondary: #3182ce; // 中等藍(lán)色}</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 class="bg-th-secondary text-th-primary">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 class="bg-th-secondary text-th-primary">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!