Verschiedene Grade der benutzerdefinierten Immobiliennutzung

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!