Choses que vous ne savez peut-être pas sur les variables CSS - Règles de dénomination et attributions de valeurs

Dans mon exploration des variables CSS, j'ai découvert beaucoup de potentiels passionnants et de détails subtils qui ne sont pas toujours apparents au premier coup d'œil. Comme beaucoup de développeurs, j'ai d'abord utilisé les variables CSS de manière simple et directe, rencontrant rarement des cas extrêmes. Cette approche est courante et efficace à de nombreuses fins, mais elle signifie qu’il y a beaucoup plus à explorer et à expérimenter. À mon avis, acquérir une compréhension plus approfondie des règles de dénomination des variables CSS et des attributions de valeurs valides peut considérablement élargir la portée et la flexibilité de leurs applications.

J'ai compilé mes recherches et mes idées ici, dans le but de fournir un aperçu plus approfondi et complet des variables CSS. J'espère que cet article sera une ressource pour vous aider, vous et moi-même, à libérer tout le potentiel des variables CSS et à découvrir de nouvelles possibilités en matière de style.

Cette série suppose que vous êtes déjà familier avec les bases des variables CSS, telles que la syntaxe --name: value et la fonction var(--name), ou que vous êtes à l'aise avec les concepts fondamentaux couvert dans le premier tiers de cette introduction aux variables CSS.

Règles de dénomination

Lors de l'utilisation de variables CSS, la dénomination est la première étape essentielle. Voici quelques directives clés pour nommer les variables CSS :

Préfixe de base

Tous les noms de propriétés personnalisées doivent commencer par deux tirets (--), par exemple, --main-color. Ce préfixe aide le navigateur à distinguer les propriétés personnalisées des propriétés CSS natives, réduisant ainsi les risques de conflits.

Sensibilité à la casse

Les noms de propriétés personnalisées CSS sont sensibles à la casse, ce qui signifie que --main-color et --Main-Color sont traités comme deux variables entièrement différentes. Il est important de maintenir une casse cohérente dans tout votre code pour éviter de référencer par erreur des variables avec des casses incompatibles, ce qui peut entraîner des erreurs d'analyse.

Exemple :

   :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 */
   }

Mots réservés :

Un autonome -- est réservé et peut avoir des objectifs spécifiques dans les spécifications futures. Par conséquent, évitez de l’utiliser comme nom de propriété personnalisée.
Exemple :

   :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 */
   }

Restrictions de dénomination :

Lors de la nomination des variables CSS, il est crucial de prendre en compte les caractères et les conventions autorisés, qui améliorent la lisibilité et évitent les conflits.

1. Caractères autorisés :
   • Caractères alphabétiques : Lettres anglaises majuscules et minuscules (A-Z, a-z)
   • Nombres :0-9
   • Traits d'union : -
   • Soulignements : _
   • Caractères Unicode : Emojis ou caractères non latins (gamme Unicode U 0080 et supérieur)
2. Échapper aux caractères spéciaux : Si un nom de variable comprend des caractères spéciaux (tels que & ou ?), il peut être représenté à l'aide de caractères d'échappement () ou de codes Unicode. Par exemple, & peut être écrit sous la forme 26. (Reportez-vous à Syntaxe et types de données de base - Caractères et casse pour plus de détails).
3. Longueur variable : Bien qu'il n'y ait pas de limites strictes sur la longueur des noms de variables, pour des raisons de lisibilité, il est recommandé de limiter les noms à moins de 50 caractères. J'ai fait quelques expériences avec Chromium, il peut prendre en charge une longueur de nom variable jusqu'à 1 million de caractères.

Exemple
L'exemple suivant montre la flexibilité de la dénomination des variables CSS et comment gérer correctement les caractères spéciaux :

   :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 */
   }

Attribution de valeurs

Les variables CSS peuvent contenir différents types de valeurs, mais elles doivent également suivre des règles de syntaxe spécifiques. Examinons quelques exemples d'attributions de valeurs valides :

   :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 */
   }

Comme le montrent ces exemples, les variables CSS prennent en charge un large éventail de valeurs. Cependant, étant donné que les variables CSS font partie des propriétés CSS, elles doivent suivre la syntaxe CSS générale, comme la correspondance des guillemets et des parenthèses. Explorons quelques valeurs qui ne répondent pas à ces exigences.

Valeurs invalides

L'attribution de valeurs non valides aux variables CSS peut provoquer des erreurs d'analyse, ce qui peut entraîner des problèmes dans les styles ultérieurs. Voici quelques exemples d'attributions de valeurs non valides :

   :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 */
   }

Utiliser !important

Les variables CSS, comme les autres propriétés CSS, prennent en charge l'indicateur !important, qui affecte la priorité. Voici un exemple montrant comment !important impacte la priorité des variables :

: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 */
}

Dans cet exemple, #target et .cls affectent tous deux la variable --text-color sur le div. Par spécificité du sélecteur, #target doit remplacer .cls. Cependant, comme --text-color dans .cls utilise !important, la couleur finale appliquée à div sera verte. Il est important de noter que !important n’impacte que la priorité entre les variables et ne se propage pas à la propriété faisant référence à la variable. La couleur résultante est simplement verte, pas verte !important.

Utiliser l'initiale

   :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 */
   }

Utiliser initial comme valeur de variable CSS est un comportement unique. Lorsqu'elle est affectée à une variable, initial rend la variable invalide, provoquant son échec lors de l'accès avec var(). Cela diffère d’une valeur vide (--empty: ;), qui ne rendra pas une propriété invalide. L’utilisation de initial « réinitialise » effectivement une variable, annulant ainsi sa définition. (Référence)

Cycles de dépendance

Les variables CSS prennent en charge le référencement d'autres variables, mais si un cycle de dépendance se produit, toutes les variables du cycle deviennent invalides. Voici un exemple de cycle de dépendance :

   :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 */
   }

Dans cet exemple, --one, --two et --trois se référencent mutuellement, créant ainsi un cycle. En conséquence, les trois variables deviennent invalides en raison de la dépendance circulaire, ce qui les empêche de se résoudre. (Référence)

Conclusion

Dans cet article, nous avons approfondi les règles de dénomination et d'attribution de valeurs pour les variables CSS, expliquant comment définir et gérer correctement ces variables tout en évitant les erreurs d'analyse courantes. Grâce à ces connaissances fondamentales, vous devriez être en mesure d'utiliser les variables CSS plus efficacement dans vos futurs projets de développement.

Le prochain article explorera comment utiliser var() pour récupérer les valeurs des variables CSS, ainsi que des scénarios d'application spécifiques pour rendre votre utilisation des variables CSS encore plus flexible et puissante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!