Eine M?glichkeit, benutzerdefinierte Eigenschaften zu verwenden, besteht darin, sie als Design -Token zu betrachten: Farben, Abstand, Schriftarten und mehr. Sie k?nnen sie auf die Wurzel der Seite setzen und im gesamten CSS verwenden. Sehr nützlich und in den letzten Millionen Jahren nicht nur benutzerdefinierte Eigenschaften, sondern auch klassische Anwendungsf?lle für Pr?prozessorvariablen.

Eine andere M?glichkeit zu verwenden (die in Verbindung mit der Design -Token -Methode verwendet werden kann) besteht darin, sie für jede wichtige Auswahl der einzigartigen Stile für ein bestimmtes Element gründlicher zu verwenden.

Angenommen, Sie haben eine solche Karte (für Demonstrationszwecke vereinfacht):

 <code>.card { background: hsl(200deg 15% 73%); border: 4px solid rgb(255 255 255 / 0.5); padding: 2rem; border-radius: 8px; } .card > h2 { margin: 0 0 1rem 0; border-bottom: 3px solid rgba(0 0 0 / 0.2); }</code>

sehr gut.

Wenn Sie jedoch unvermeidlich Variationen von Karten durchführen, müssen Sie diese Regels?tze selbst überschreiben. Die CSS -Attributmethode kann wie folgt sein:

 <code>.card { --card-background: hsl(200deg 15% 73%); --card-border: 4px solid rgb(255 255 255 / 0.5); --card-padding: 2rem; --card-border-radius: 8px; --card-title-margin: 0 0 1rem 0; --card-title-border: 3px solid rgba(0 0 0 / 0.2); background: var(--card-background); border: var(--card-border); padding: var(--card-padding); border-radius: var(--card-border-radius); } .card > h2 { margin: var(--card-title-margin); border-bottom: var(--card-title-border); }</code>

Im Moment ist es ein bisschen l?nger, aber schauen Sie sich an, was passiert, wenn wir eine Variation machen wollen:

 <code>.card-variation { --card-background: purple; --card-padding-block: 2.5rem; --card-title-margin: 0 0 2rem 0; }</code>

Hier sind drei offensichtliche Vorteile:

• Ich habe nur die Werte ge?ndert, die explizit auf ver?nderbar eingestellt sind. Mein Hauptkartenprototyp h?lt die Integrit?t, die ich beibehalten m?chte.
• Ich kann die untergeordneten Elemente der Variante stylen, ohne diese Selektoren korrekt neu zu schreiben.
• Ich kann jetzt Style Overrides aus dem Style-Attribut in HTML für eine schnelle einmalige Variante übergeben.

Verwenden Sie Fallback, um Redundanz zu reduzieren

Anstatt benutzerdefinierte Eigenschaften oben zu deklarieren und sie dann unten zu verwenden, kann ich es gleichzeitig auf diese Weise tun:

 <code>.card { background: var(--card-background, hsl(200deg 15% 73%)); border: var(--card-border, 4px solid rgb(255 255 255 / 0.5)); padding: var(--card-padding, 2rem); border-radius: var(--card-border-radius, 8px); } .card > h2 { margin: var(--card-title-margin, 0 0 1rem 0); border-bottom: var(--card-title-border, 3px solid rgba(0 0 0 / 0.2)); }</code>

Wenn eine Eigenschaft wie-Card-Background eingestellt ist, wird der Fallback-Wert hier au?er Kraft gesetzt. Ich mag es nicht so, weil es bedeutet, dass das Element über der .karte es überschreiben kann. Dies mag das sein, was Sie wollen, aber dies ist nicht genau das gleiche wie die Erkl?rung des Wertes auf der .karte zu Beginn. Hier gibt es keine starke Meinung.

Weitere Zersetzung

Ein Beispiel hier ist, dass Sie die Polsterung m?glicherweise separat steuern m?chten.

 <code>.card { --card-padding-block: 2rem; --card-padding-inline: 2rem; --card-padding: var(--card-padding-block) var(--card-padding-inline); padding: var(--card-padding); }</code>

Wenn ich jetzt will, kann die Variante nur einen Teil der Polsterung steuern:

 <code>.card-variation { --card-padding-inline: 3rem; }</code>

Aber Sie müssen sich eines gro?en Problems bewusst sein. Dies bedeutet, dass dies nicht funktioniert, wenn Sie all dies an der Wurzel deklarieren, da diese verschachtelten Eigenschaften analysiert wurden. Aber solange es zuerst auf der .karte deklariert ist, wird es Ihnen hier gut gehen.

übertreiben Sie es?

Angenommen, Sie m?chten über jeden Teil des Wertes eine überl?ngere Kontrolle haben. Zum Beispiel:

 <code>html { --color-1-h: 200deg; --color-1-s: 15%; --color-1-l: 73%; --color-1-hsl: var(--color-1-h) var(--color-1-s) var(--color-1-l); --color-1: hsl(var(--color-1-hsl)); }</code>

Es ist ein bisschen klug, aber es mag zu viel sein. Die Farben werden mit ziemlicher Sicherheit an der Wurzel deklariert und bleiben unver?ndert, sodass dieses gro?e Problem es unm?glich macht, unter-starken Auftr?gen auf niedrige Ebene zu überschreiben. Wenn Sie-Color-1 haben, haben Sie wahrscheinlich 2-9 (oder mehr), was gro?artig ist, weil das Farbsystem viel raffinierter ist als die Mathematik des einfachen Farbteils.

Erbietungsfestes Designsystem?

Es besteht kein Zweifel, dass Rückenwind sehr beliebt ist. Es verwendet Atommethoden, bei denen eine gro?e Anzahl von HTML -Klassen eine Eigenschaft separat steuern. Ich denke, ein Grund dafür ist, dass das Design, wenn Sie aus diesen vorkonfigurierten Klassen w?hlen, ziemlich gut ist. Sie k?nnen nicht aus der Spur gehen. Sie w?hlen aus einer Reihe von endlichen Werten, die es gut aussehen lassen.

Ich würde nicht sagen, dass die Stilmethode, die auf benutzerdefinierten Eigenschaften basiert, genau gleich ist. Beispielsweise müssen Sie weiterhin die Abstraktion der Klassennamen berücksichtigen, anstatt Stile direkt auf HTML -Elemente anzuwenden. Es kann jedoch einige der gleichen Einschr?nkungen/Einschr?nkungen wie Rückenwind und andere Atomklassenmethoden genie?en. Wenn Sie nur aus vordefinierten-Abstands-X-Werten,--Color-X-Werten und--font-X-Werten w?hlen k?nnen, k?nnen Sie ein koh?rendiveres Design als je zuvor erreichen.

Pers?nlich finde ich es gut, sich auf ein Designsystem zu bewegen, das mehr auf benutzerdefinierte Eigenschaften stützt - wenn nichts Variationen und Abdeckungen zu verwalten erleichtern.

Wie nehmen Designsysteme von Drittanbietern die Funktionen, die sie bieten, als ... nur eine gro?e Reihe benutzerdefinierter Eigenschaften, die Sie nach Belieben verwenden k?nnen?

Erstellungsstoffe von Drittanbietern müssen nicht einmal alles wie diese aufnehmen. Zum Beispiel bietet der übergang von Adam Argyle.

Verst?ndlichkeitskosten

Ein Argument, das ich gegen diesen umfassenderen Ansatz für benutzerdefinierte Eigenschaften geh?rt habe, ist die Verst?ndlichkeit von Neulingen. Wenn Sie das System geschrieben haben, k?nnte es für Sie viel Sinn machen. Aber es ist eine zus?tzliche Abstraktion über CSS. Alle Menschen teilen CSS -Kenntnisse, w?hrend kundenspezifische Systemwissen nur von Personen geteilt wird, die aktiv am System beteiligt sind.

Systeme, die für die Verwendung benutzerdefinierter Eigenschaften neu sind, haben eine sehr steile Lernkurve.

Video

Das obige ist der detaillierte Inhalt vonVerschiedene Grade der benutzerdefinierten Immobiliennutzung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!