Organisieren von Design -Systemkomponentenmuster mit CSS -Kaskadenschichten

In diesem Artikel wird erläutert, wie die CSS -Kaskadenschicht verwendet wird, um die Anpassbarkeit, Effizienz, Benutzerfreundlichkeit und einfache Verständnis von Komponenten zu verbessern.

Ich bin begeistert von der Code -Organisation und finde, dass die Kaskade eine hervorragende Möglichkeit ist, Ihren Code explizit zu organisieren, da sie direkt der gelesenen Bestellung der Kaskade folgt. Noch besser, zusätzlich zu "Organisationen" auf höchstem Niveau "können auch Cascades verschachtelt werden, sodass wir genauere Stile basierend auf Kaskaden schreiben können.

Der einzige Nachteil ist Ihre Fantasie-nichts kann uns davon abhalten, CSS zu überarbeiten. Um klar zu sein, werden Sie wahrscheinlich denken, dass das, was ich zeigen werde, ein Überbezeichnung ist. Aber ich denke, ich habe einen Gleichgewichtspunkt gefunden, es einfach und organisiert gehalten und freue mich, meine Erkenntnisse zu teilen.

Zusammensetzung des CSS -Komponentenmodus

Verwenden wir Schaltflächen als Beispiel, um das Muster des Schreibens von Komponenten mithilfe von CSS zu untersuchen. Tasten sind eine der beliebtesten Komponenten in fast jeder Komponentenbibliothek. Es gibt einen Grund für diese Popularität, da in verschiedenen Anwendungsfällen Schaltflächen verwendet werden können, darunter:

• Führen Sie eine Aktion aus, z. B. das Öffnen einer Schublade,
• Navigieren Sie zu verschiedenen Teilen der Benutzeroberfläche und
• Halten Sie einen Zustand wie Fokus oder Schwebe.

und die Schaltflächen sind in vielen verschiedenen Markierungsformen wie <button></button>, input[type="button"] und <a></a> erhältlich. Wenn Sie glauben, gibt es noch mehr Möglichkeiten, Knöpfe zu machen.

Am wichtigsten ist, dass verschiedene Schaltflächen unterschiedliche Funktionen ausführen und normalerweise entsprechend gestaltet sind, damit die Schaltflächen einer Operation von den Schaltflächen einer anderen Operation unterschieden werden. Tasten reagieren auch auf Zustandsänderungen, z. B. wenn sie schweben, sich bewegen und sich konzentrieren. Wenn Sie jemals CSS mit BEM -Syntax geschrieben haben, können wir im Kontext der Kaskadenschicht über eine ähnliche Idee nachdenken.

Okay, lassen Sie uns jetzt einen Code schreiben. Lassen Sie uns insbesondere verschiedene Arten von Schaltflächen erstellen. Wir beginnen mit einer

-Klasse, die wir auf jedes Element einstellen können, das wir als Schaltfläche festlegen möchten! Wir wissen bereits, dass Schaltflächen in vielen verschiedenen Tag -Formularen erhältlich sind, sodass die gemeinsame

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

-Klasse die wiederverwendbarste und erweiterbarste Möglichkeit ist, eine oder alle dieser Schaltflächen auszuwählen.

.button .button Verwenden von Cascades

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

Hier können wir unsere erste Kaskadenschicht einfügen! Denken Sie daran, dass der Grund, warum die Kaskadenschicht zuerst möchten, dass wir die lesende Reihenfolge der CSS -Kaskade bei der Bewertung des Stils festlegen können. Wir können CSS angeben, zuerst eine Schicht, dann eine andere Schicht, dann eine andere Ebene zu bewerten - alles in der gewünschten Reihenfolge. Dies ist eine unglaubliche Funktion, die uns Supermächte gibt, um zu kontrollieren, welches Styles der Browser für "Win" ist.

Wir nennen diese Ebene components, da die Schaltfläche eine Komponente ist. Der Grund, warum ich den Namen mag, ist, dass es generisch genug ist, um andere Komponenten zu unterstützen, die wir in Zukunft hinzufügen werden, wenn sie beschlossen, das Designsystem zu erweitern. Es skaliert mit uns und behält eine gute Sorge von anderen Stilen bei, die wir in Zukunft schreiben, die möglicherweise nicht spezifisch für Komponenten ist.

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

verschachtelte Kaskaden

Wo die Dinge ein wenig komisch werden, ist hier. Wussten Sie, dass Sie Kaskadenschichten innerhalb der Klasse nisten können? Das ist eine totale Sache. Wenn wir uns das ansehen, können wir eine neue Ebene in der Klasse einführen, die sich bereits in seiner eigenen Ebene befindet. Das meine ich: .button am Ende interpretiert der Browser die innere Schicht:

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

In diesem Beitrag geht es nicht nur um verschachtelte Stile, daher möchte ich nur sagen, dass Ihre Kilometerleistung variieren kann, wenn Sie es tun. Schauen Sie sich den jüngsten Artikel von Andy Bell zur Verwendung verschachtelter Stile mit Vorsicht an.

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

Stilstruktur

Bisher haben wir eine

-Klasse innerhalb einer Kaskadenschicht festgelegt, die alle Art von Komponenten in unserem Designsystem aufgenommen hat. In diesem

befindet sich eine weitere Kaskadenschicht, mit der verschiedene Arten von Schaltflächen ausgewählt werden können, auf die wir im Tag begegnen können. Wir haben zuvor besprochen, dass die Schaltflächen

, .button oder .button sind, wobei wir uns entscheiden, jeden Typ einzeln zu stylen. <button></button> <input> Wir können die Funktion <a></a> pseudo-selektor verwenden, die ähnlich ist zu sagen: "Wenn dieses

ein :is() ein .button Element ist, dann werden diese Stile angewendet." <a></a> Definieren Sie den Standard -Schaltflächenstil

<code>/* 组件顶级层 */
@layer components {

  .button {
    /* 组件元素层 */
    @layer elements {
      /* 样式 */
    }
  }
}</code>

Ich werde unseren Code mit einem universellen Stil füllen, der für alle Schaltflächen funktioniert. Diese Stile befinden sich oben in der Elementebene, sodass sie unabhängig von der Markierung auf alle Tasten angewendet werden. Sie können als Standard -Schaltfläche betrachtet werden.

Taste Statusstil definieren

<code>@layer components {
  @layer elements {
    .button {
      /* 按钮样式... */
    }
  }
}</code>

Was sollten Benutzer tun, wenn sie mit der Standardtaste interagieren? Dies sind die verschiedenen Zustände, die Schaltflächen annehmen können, wenn der Benutzer mit ihm interagiert, und wir müssen sie entsprechend stylen.

Ich werde einen neuen, kaskadierten Unterschicht direkt unter dem Element -Unterschicht erstellen, kreativ "Zustände" (Zustand):

Pause und denken Sie hier darüber nach. Welche Zustände sollten wir ansprechen? Was wollen wir für jeden dieser Zustände ändern?

Einige Zustände können ähnliche Eigenschaftenänderungen wie :hover und :focus mit derselben Hintergrundfarbe teilen. Glücklicherweise bietet CSS uns Tools zur Lösung solcher Probleme, wobei die Funktion :where() zu den auf dem Zustand basierenden Änderungen von Eigenschaften gruppiert wird. Warum :where() statt :is()? :where() hat keine Spezifität, was bedeutet, dass es einfacher zu bedecken ist als , was die Spezifität des Elements mit dem höchsten Spezifitätswert in seinen Parametern nimmt. Die Spezifität niedrig zu halten ist eine Tugend beim Schreiben skalierbarer, wartbarer CSS. :is() :is()

Aber wie aktualisieren wir den Stil der Schaltfläche auf eine aussagekräftige Weise? Ich meine, wie stellen wir sicher, dass der Knopf wie Schwebe oder Fokus aussieht? Wir müssen nur eine neue Hintergrundfarbe hinzufügen, aber im Idealfall sollte die Farbe mit dem in der Elementebene festgelegten

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

in Verbindung gebracht werden.

Lassen Sie es uns also ein wenig refaktor. Zuvor habe ich das des background-color -Elements auf

festgelegt. Ich möchte die Farbe wiederverwenden, daher ist es besser, sie in eine CSS -Variable umzuwandeln, damit wir sie sofort aktualisieren und überall angewendet werden können. Abhängig von Variablen ist ein weiterer Vorteil des Schreibens skalierbarer und wartbarer CSS.

.button Ich werde eine neue Variable namens background-color erstellen, die zunächst auf darkslateblue eingestellt ist, und sie dann auf den Standard -Taste -Stil einstellen:

--button-background-color Jetzt, da wir die Farben in Variablen gespeichert haben, können wir die gleiche Variable für den Schwebe- und Fokuszustand der Taste in anderen Ebenen einstellen und darkslateblue mit der relativ neuen Funktion

in eine leichtere Farbe konvertieren, wenn die Taste schwebte oder fokussiert ist.

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

Zurück zu unserer Zustandsschicht! Wir mischen zuerst die Farben in einer neuen CSS -Variablen namens color-mix(): darkslateblue

Wir können diese Farbe dann anwenden, indem wir das Attribut --state-background-color aktualisieren.

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

Definieren Sie den modifizierten Schaltflächenstil background-color

Zusätzlich zu Elementen und Zustandsebenen suchen Sie möglicherweise auch nach Änderungen der Komponenten wie Modifikatoren. Dies liegt daran, dass nicht alle Schaltflächen wie Ihre Standardtaste aussehen. Möglicherweise möchten Sie eine Schaltfläche mit einer grünen Hintergrundfarbe, damit die Benutzer Entscheidungen bestätigen können. Oder Sie möchten eine rote Schaltfläche, die beim Klicken auf Gefahr hinweist. So können wir die vorhandenen Standardstaststile einnehmen und diese für diese spezifischen Anwendungsfälle ändern.

<code>/* 组件顶级层 */
@layer components {

  .button {
    /* 组件元素层 */
    @layer elements {
      /* 样式 */
    }
  }
}</code>

Wenn wir die Reihenfolge der Kaskaden berücksichtigen - immer von oben nach unten -, möchten wir nicht, dass der modifizierte Stil die Stile in der von uns gerade hergestellten staatlichen Schicht beeinflusst. Fügen wir also eine neue Modifikatorschicht zwischen dem Element und dem Zustand hinzu:

Ähnlich wie wir den Status handhaben, können wir jetzt die

-Revariable für jeden Schaltflächenmodifikator aktualisieren. Natürlich können wir den Stil weiter ändern, aber wir halten es ziemlich einfach zu demonstrieren, wie dieses System funktioniert.

Wir erstellen eine neue Klasse, die die Standardschaltfläche background-color von darkslateblue nach darkgreen ändert. Auch hier können wir uns auf den :is() -Alektor verlassen, da wir in diesem Fall eine erhöhte Spezifität benötigen. Auf diese Weise können wir den Standard -Schaltflächenstil mit der Modifikator -Klasse überschreiben. Wir nennen diese Klasse .success (Grün ist die Farbe von "Erfolg") und geben sie :is():

zur Verfügung

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

Wenn wir die .success -Klasse zu einer unserer Schaltflächen hinzufügen, wird sie darkgreen anstelle von darkslateblue, was genau das ist, was wir wollen. Da wir in der staatlichen Ebene einige color-mix() -Operationen durchgeführt haben, werden wir diese Schwebe- und Fokusstile automatisch erben, was bedeutet, dass darkgreen in diesen Zuständen flach wird.

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

Integrieren Sie alles zusammen

Wir können alle CSS -Attribute, die in die benutzerdefinierten CSS -Attribute geändert werden müssen, umart werden, was uns viel Anpassungsraum bietet.

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

Bitte beachten Sie: Schauen Sie sich die Demo genauer an und sehen Sie, wie ich den Button-Hintergrund mit light-dark() angepasst habe-und lesen Sie Sara Joy's "Come to the Light-Dark () Seite", um eine volle Sichtweise darauf zu erhalten, wie es funktioniert!

Was denkst du? Nutzen Sie es, um Ihren Stil zu organisieren? Für ein kleines Projekt mit wenigen Komponenten kann das Erstellen eines Kaskadensystems übermäßig sein. Aber selbst ein kleiner Versuch, wie wir es gerade getan haben, können wir zeigen, wie viel wir beim Management oder sogar bei der Zählung - CSS -Kaskaden haben. Die Schaltflächen sind täuschend komplex, aber wir sehen, wie viele Stile benötigt werden, um Stile von Standardstilen bis hin zum Schreiben ihres Zustands und ihren modifizierten Versionen zu verarbeiten.

Das obige ist der detaillierte Inhalt vonOrganisieren von Design -Systemkomponentenmuster mit CSS -Kaskadenschichten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!