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!