Dinge, die Sie möglicherweise nicht über CSS-Variablen wissen – Benennungsregeln und Wertzuweisungen

Bei meiner Erkundung von CSS-Variablen habe ich viele spannende Potenziale und subtile Details entdeckt, die nicht immer auf den ersten Blick erkennbar sind. Wie viele Entwickler habe ich CSS-Variablen zunächst auf einfache, unkomplizierte Weise verwendet und bin selten auf Grenzfälle gestoßen. Dieser Ansatz ist für viele Zwecke üblich und effektiv, bedeutet aber, dass es noch viel mehr zu erkunden und zu experimentieren gibt. Meiner Ansicht nach kann ein tieferes Verständnis der Benennungsregeln für CSS-Variablen und gültiger Wertzuweisungen den Umfang und die Flexibilität ihrer Anwendungen erheblich erweitern.

Ich habe meine Recherchen und Erkenntnisse hier zusammengestellt, um einen gründlicheren und umfassenderen Einblick in CSS-Variablen zu bieten. Ich hoffe, dass dieser Artikel Ihnen und mir dabei hilft, das volle Potenzial von CSS-Variablen auszuschöpfen und neue Möglichkeiten im Styling zu entdecken.

In dieser Serie wird davon ausgegangen, dass Sie bereits mit den Grundlagen von CSS-Variablen vertraut sind, z. B. der Syntax „--name: value“ und der Funktion „var(--name)“, oder dass Sie mit den grundlegenden Konzepten vertraut sind wird im ersten Drittel dieser Einführung in CSS-Variablen behandelt.

Benennungsregeln

Bei der Verwendung von CSS-Variablen ist die Benennung der erste wesentliche Schritt. Hier sind einige wichtige Richtlinien für die Benennung von CSS-Variablen:

Grundpräfix

Alle benutzerdefinierten Eigenschaftsnamen müssen mit zwei Bindestrichen (--) beginnen, zum Beispiel --main-color. Dieses Präfix hilft dem Browser, benutzerdefinierte Eigenschaften von nativen CSS-Eigenschaften zu unterscheiden, wodurch das Risiko von Konflikten verringert wird.

Groß-/Kleinschreibung

Bei Namen benutzerdefinierter CSS-Eigenschaften wird die Groß-/Kleinschreibung beachtet, was bedeutet, dass --main-color und --Main-Color als zwei völlig unterschiedliche Variablen behandelt werden. Es ist wichtig, im gesamten Code eine konsistente Groß-/Kleinschreibung beizubehalten, um zu vermeiden, dass Variablen fälschlicherweise mit nicht übereinstimmender Groß-/Kleinschreibung referenziert werden, was zu Analysefehlern führen kann.

Beispiel:

   :root {
     --main-color: blue;
     --Main-Color: red; /* Case difference, treated as a separate property */
   }

   .box1 {
     color: var(--main-color); /* Refers to --main-color, resulting in blue */
   }

   .box2 {
     color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
   }

Reservierte Wörter:

Ein Standalone – ist reserviert und kann in zukünftigen Spezifikationen bestimmte Zwecke haben. Vermeiden Sie daher die Verwendung als benutzerdefinierter Eigenschaftsname.
Beispiel:

   :root {
     --: green; /* Invalid: a standalone -- is reserved */
     --custom-color: green; /* Valid: custom property avoids reserved name */
   }

   .text {
     color: var(--custom-color); /* Uses the custom property */
   }

Namensbeschränkungen:

Bei der Benennung von CSS-Variablen ist es wichtig, zulässige Zeichen und Konventionen zu berücksichtigen, die die Lesbarkeit verbessern und Konflikte verhindern.

1. Zulässige Zeichen:
   • Alphabetische Zeichen: Englische Groß- und Kleinbuchstaben (A-Z, a-z)
   • Zahlen: 0-9
   • Bindestriche: -
   • Unterstriche: _
   • Unicode-Zeichen: Emojis oder nicht-lateinische Zeichen (Unicode-Bereich U 0080 und höher)
2. Sonderzeichen maskieren: Wenn ein Variablenname Sonderzeichen (z. B. & oder ?) enthält, kann er mithilfe von Escape-Zeichen () oder Unicode-Codes dargestellt werden. & kann beispielsweise als 26 geschrieben werden. (Weitere Einzelheiten finden Sie unter Syntax und grundlegende Datentypen – Zeichen und Groß-/Kleinschreibung).
3. Variable Länge: Obwohl es keine strengen Beschränkungen für die Länge von Variablennamen gibt, wird aus Gründen der Lesbarkeit empfohlen, Namen unter 50 Zeichen zu belassen. Ich habe ein paar Experimente mit Chromium gemacht, es unterstützt variable Namen mit einer Länge von bis zu 1 Million Zeichen.

Beispiel
Das folgende Beispiel demonstriert die Flexibilität der CSS-Variablenbenennung und den richtigen Umgang mit Sonderzeichen:

   :root {
     --main-color: blue;
     --Main-Color: red; /* Case difference, treated as a separate property */
   }

   .box1 {
     color: var(--main-color); /* Refers to --main-color, resulting in blue */
   }

   .box2 {
     color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
   }

Werte zuweisen

CSS-Variablen können verschiedene Arten von Werten enthalten, müssen aber auch bestimmten Syntaxregeln folgen. Schauen wir uns einige Beispiele für gültige Wertzuweisungen an:

   :root {
     --: green; /* Invalid: a standalone -- is reserved */
     --custom-color: green; /* Valid: custom property avoids reserved name */
   }

   .text {
     color: var(--custom-color); /* Uses the custom property */
   }

Wie diese Beispiele zeigen, unterstützen CSS-Variablen eine breite Palette von Werten. Da CSS-Variablen jedoch Teil von CSS-Eigenschaften sind, müssen sie der allgemeinen CSS-Syntax folgen, wie etwa passenden Anführungszeichen und Klammern. Sehen wir uns einige Werte an, die diese Anforderungen nicht erfüllen.

Ungültige Werte

Das Zuweisen ungültiger Werte zu CSS-Variablen kann zu Analysefehlern führen, die zu Problemen in nachfolgenden Stilen führen können. Hier sind einige Beispiele für ungültige Wertzuweisungen:

   :root {
     /* Naming with Unicode characters */
     --primary-color: #3498db;
     --secondary-color: #e74c3c;

     /* Using an Emoji as a variable name */
     --?: #2ecc71;

     /* Special characters with escape sequences, resulting in --B&W? */
     --B\&W\?: #2ecc72;

     /* Using Unicode escape codes, equivalent to --B&W? */
     --BWF: #abcdef;
   }

   .container {
     color: var(--BWF); /* Result is #abcdef */
   }

   .container-alt {
     color: var(--B\&W\?); /* Result is #abcdef */
   }

Verwendung von !important

CSS-Variablen unterstützen wie andere CSS-Eigenschaften das Flag !important, das sich auf die Priorität auswirkt. Hier ist ein Beispiel, das zeigt, wie sich !important auf die Variablenpriorität auswirkt:

:root {
  --foo: if(x > 5) this.width = 10;
  --string-with-semicolon: "font-size: 16px;"; /* Strings can include semicolons */
  --complex-calc: calc(100% / 3 + 20px);       /* Complex calculations with calc() */
  --negative-value: -10px;                     /* Negative values */
  --multiple-values: 10px 20px 30px 40px;      /* Multiple values, e.g., for margin or padding */
  --unitless-number: 1.5;                      /* Unitless numbers */
  --nested-var: var(--string-with-semicolon);  /* Nested variables using var() */
  --empty-string: ;                            /* Empty string */
  --color: rgba(255, 0, 0, 0.5);               /* Color functions */
  --special-chars: "Content: \"Hello\"";       /* Strings with special characters */
}

In diesem Beispiel wirken sich sowohl #target als auch .cls auf die Variable --text-color im div aus. Aufgrund der Selektorspezifität sollte #target .cls überschreiben. Da jedoch --text-color in .cls !important verwendet, ist die endgültige Farbe, die auf div angewendet wird, Grün. Es ist wichtig zu beachten, dass !important nur die Priorität zwischen Variablen beeinflusst und sich nicht auf die Eigenschaft überträgt, die auf die Variable verweist. Die resultierende Farbe ist einfach grün, nicht grün !wichtig.

Initial verwenden

   :root {
     --main-color: blue;
     --Main-Color: red; /* Case difference, treated as a separate property */
   }

   .box1 {
     color: var(--main-color); /* Refers to --main-color, resulting in blue */
   }

   .box2 {
     color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
   }

Die Verwendung von „initial“ als CSS-Variablenwert ist ein einzigartiges Verhalten. Bei der Zuweisung an eine Variable macht initial die Variable ungültig, was dazu führt, dass der Zugriff mit var() fehlschlägt. Dies unterscheidet sich von einem leeren Wert (--empty: ;), der nicht dazu führt, dass eine Eigenschaft ungültig wird. Durch die Verwendung von initial wird eine Variable effektiv „zurückgesetzt“ und ihre Definition aufgehoben. (Referenz)

Abhängigkeitszyklen

CSS-Variablen unterstützen die Referenzierung anderer Variablen, aber wenn ein Abhängigkeitszyklus auftritt, werden alle Variablen im Zyklus ungültig. Hier ist ein Beispiel für einen Abhängigkeitszyklus:

   :root {
     --: green; /* Invalid: a standalone -- is reserved */
     --custom-color: green; /* Valid: custom property avoids reserved name */
   }

   .text {
     color: var(--custom-color); /* Uses the custom property */
   }

In diesem Beispiel verweisen --one, --two und -- three aufeinander und erzeugen so einen Zyklus. Dadurch werden alle drei Variablen aufgrund der zirkulären Abhängigkeit ungültig, was ihre Auflösung verhindert. (Referenz)

Abschluss

In diesem Artikel haben wir uns eingehend mit den Regeln für die Benennung und Wertzuweisung von CSS-Variablen befasst und erläutert, wie diese Variablen richtig definiert und verwaltet werden und gleichzeitig häufige Analysefehler vermieden werden. Mit diesem Grundwissen sollten Sie in der Lage sein, CSS-Variablen in Ihren zukünftigen Entwicklungsprojekten effektiver zu nutzen.

Der nächste Artikel befasst sich mit der Verwendung von var() zum Abrufen von CSS-Variablenwerten sowie mit spezifischen Anwendungsszenarien, um die Verwendung von CSS-Variablen noch flexibler und leistungsfähiger zu gestalten.

Das obige ist der detaillierte Inhalt vonDinge, die Sie möglicherweise nicht über CSS-Variablen wissen – Benennungsregeln und Wertzuweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!