Comment utiliser des variables dans CSS et rationaliser votre style

par


La majorité des sites internet exploitent le CSS afin d’affiner leur apparence et de styliser les différents composants de la page. Le CSS, ou feuille de style en cascade, n’est pas, d’un point de vue technique, un langage de programmation. Toutefois, il peut être utilisé conjointement avec des langages de programmation comme JavaScript pour créer des pages web interactives et réactives.

Si vous avez déjà manipulé des langages de programmation, tel que JavaScript, vous savez qu’il est possible de déclarer une variable, de lui attribuer une valeur et de la réutiliser dans diverses sections de votre code. La bonne nouvelle est que ce même principe peut être appliqué en CSS.

Cet article a pour but de définir ce que sont les variables CSS, de mettre en lumière leurs avantages, et de vous expliquer comment déclarer et exploiter une variable en CSS.

Que sont les variables en CSS ?

Les variables CSS sont des propriétés sur mesure qui permettent aux développeurs web d’enregistrer des valeurs qu’ils peuvent réutiliser à travers toute la feuille de style. Par exemple, il est possible de définir un style de police, une couleur de fond et une taille de police que l’on peut ensuite réutiliser avec des éléments comme des titres, des paragraphes, et des divs au sein de votre base de code.

Pourquoi utiliser des variables CSS ? Voici quelques raisons :

  • Simplification de la mise à jour du code : Une fois qu’une variable est déclarée, elle peut être réutilisée dans toute la feuille de style sans avoir à modifier chaque élément manuellement.
  • Réduction de la répétition : Au fur et à mesure que votre base de code s’étend, vous constaterez la présence de classes et d’éléments similaires. Au lieu de rédiger du code CSS pour chaque élément, il est possible d’utiliser simplement des variables CSS.
  • Amélioration de la maintenabilité du code : La maintenance du code est un aspect crucial si vous souhaitez assurer la pérennité de votre activité.
  • Amélioration de la lisibilité : Le monde actuel favorise la collaboration. L’utilisation de variables en CSS permet d’obtenir une base de code compacte et facile à lire.
  • Facilité de maintien de la cohérence : Les variables CSS peuvent vous aider à conserver un style uniforme à mesure que votre code source s’étoffe ou que la taille de l’application augmente. Par exemple, vous pouvez définir les marges, les espaces internes, le style de police et les couleurs à appliquer aux boutons de votre site web.

Comment déclarer des variables en CSS

Maintenant que vous comprenez ce que sont les variables CSS et pourquoi il est pertinent de les utiliser, nous allons voir comment les déclarer.

Pour déclarer une variable CSS, il faut commencer par le nom de l’élément, puis ajouter deux tirets (–), le nom désiré pour la variable et enfin sa valeur. La syntaxe de base est la suivante :

element {
--nom-de-variable: valeur;
}

Par exemple, si vous voulez appliquer un espace interne (padding) sur l’ensemble de votre document, vous pouvez le déclarer de la manière suivante :

body {
--padding: 1rem;
}

Portée des variables en CSS

Les variables CSS peuvent avoir une portée locale (accessibles à l’intérieur d’un élément spécifique) ou globale (accessibles dans toute la feuille de style).

Variables locales

Les variables locales sont attribuées à des sélecteurs spécifiques. Par exemple, elles peuvent être associées à un bouton. Voici un exemple :

.button {
    --couleur-fond-bouton: #33ff4e;
}

Dans cet exemple, la variable de couleur d’arrière-plan est accessible au sélecteur de bouton et à ses enfants.

Variables globales

Une fois déclarées, les variables globales peuvent être utilisées avec n’importe quel élément de votre code. Nous employons la pseudo-classe :root pour déclarer les variables globales. Voici comment les définir :

:root {
    --couleur-primaire: gris;
    --couleur-secondaire: orange;
    --epaisseur-police: 700;
}

Dans le code ci-dessus, vous pouvez utiliser n’importe laquelle des variables définies avec différents éléments, tels que des titres, des paragraphes, des divs, ou même le corps entier.

Comment utiliser les variables en CSS

Afin de réaliser une démonstration, nous allons créer un projet et ajouter les fichiers index.html et styles.css.

Dans le fichier index.html, nous pouvons ajouter un simple div avec deux titres (h1 et h2) ainsi qu’un paragraphe (p).

<div>
  <h1>Bonjour Développeur Front-end !!!!</h1>
  <h2>Voici comment utiliser les variables en CSS.</h2>
  <p>Continuez à défiler</p>
</div>

Dans le fichier style.css, nous pouvons avoir les éléments suivants :

:root {
    --couleur-primaire: gris;
    --couleur-secondaire: orange;
    --epaisseur-police: 700;
    --taille-police: 16px;
    --style-police: italique;
}
body {
    background-color: var(--couleur-primaire);
    font-size: var(--taille-police);
}
h1 {
    color: var(--couleur-secondaire);
    font-style: var(--style-police);
}
h2 {
    font-weight: var(--epaisseur-police);
}
p {
    font-size: calc(var(--taille-police) * 1.2);
}

Une fois la page web affichée, vous obtiendrez le résultat suivant :

Dans le code ci-dessus, nous avons défini des variables globales dans l’élément :root. Il est nécessaire d’utiliser le mot-clé var pour utiliser la variable globale dans l’un de nos éléments. Par exemple, pour appliquer la couleur de fond que nous avons définie en tant que variable globale, notre code se présente comme suit :

couleur de fond : var(–couleur-primaire);

En examinant les autres éléments, vous observerez une tendance dans la manière dont le mot-clé var est appliqué.

Utiliser les variables CSS avec JavaScript

Afin d’illustrer comment utiliser les variables CSS avec JavaScript, nous emploierons des variables locales et globales.

Nous pouvons ajouter un élément d’alerte à notre code existant :

Cliquez-moi !

Voici à quoi ressemblera notre nouveau document index.html :

<div>
  <h1>Bonjour Développeur Front-end !!!!</h1>
  <h2>Voici comment utiliser les variables en CSS.</h2>
  <p>Continuez à défiler</p>
</div>
<div class="alert">Cliquez-moi !</div>

Nous pouvons personnaliser notre variable. Ajoutez le code suivant à votre code CSS existant :

.alert {
    --couleur-fond: red; /* Définition d'une variable locale */    background-color: var(--couleur-fond); /* Utilisation de la variable locale pour la couleur de fond */    padding: 10px 20px;
    border-radius: 4px;
    font-weight: var(--epaisseur-police); /* Utilisation de la variable globale pour l'épaisseur de la police */    width: 50px;
}

Nous avons réalisé les actions suivantes :

  • Défini une variable locale à l’intérieur de l’élément d’alerte :

–couleur-fond : rouge;

  • Utilisé le mot-clé var pour accéder à cette variable locale :

couleur de fond : var(–couleur-fond);

  • Utilisé la variable globale définie précédemment comme épaisseur de la police :

font-weight : var(–epaisseur-police);

Ajout de code JavaScript

Nous pouvons rendre notre élément d’alerte réactif : lorsque vous cliquez dessus, une fenêtre contextuelle s’affiche dans votre navigateur avec le message : « Nous avons utilisé des variables CSS avec JavaScript !!!! ».

Nous pouvons inclure du code JavaScript directement dans le code HTML en l’encadrant avec des balises . Le code JavaScript doit être inséré après le code HTML, mais avant la balise fermante .

Ajoutez ce code :

<script>
    const alertDiv = document.querySelector('.alert');
    alertDiv.addEventListener('click', function() {
        window.alert("Nous avons utilisé des variables CSS avec JavaScript!!!!");
    });
</script>

Votre code HTML devrait maintenant ressembler à ceci :

Notre code JavaScript effectue les actions suivantes :

  • Nous employons document.querySelector() pour localiser l’élément d’alerte.
  • Nous attribuons l’élément alerte à une variable appelée alertDiv.
  • Sur alertDiv, nous faisons appel à la méthode addEventListener() pour ajouter un événement « click ».
  • Nous utilisons window.alert() pour afficher un message lorsque l’événement click se déclenche.

Une fois la page affichée, voici ce que vous obtiendrez :

En cliquant sur l’alerte, vous verrez apparaître ceci :

Valeurs de secours dans les variables CSS

Que se passe-t-il lorsque vous référencez une variable non définie dans votre feuille de style ? L’effet CSS que vous souhaitez appliquer ne sera pas pris en compte. Les valeurs de secours offrent une valeur alternative qui sera affichée à la place de la variable non référencée.

Les valeurs de secours sont utiles pour les raisons suivantes :

  • Si certains navigateurs ne prennent pas en charge les variables CSS, la propriété select peut s’appuyer sur une valeur de remplacement.
  • Si vous soupçonnez qu’une page ne fonctionne pas comme prévu à cause d’une variable CSS, vous pouvez utiliser une valeur de secours afin de vérifier si cela est le cas.

Il est possible d’utiliser plusieurs propriétés de secours, séparées par des virgules. Prenons par exemple le code suivant :

:root {
    --couleur-primaire: #007bff;
}
.btn {
    background-color: var(--couleur-primaire, red, yellow);
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

Si vous orthographiez mal le terme couleur primaire lors de l’utilisation de la variable globale, ce qui signifie qu’elle n’est pas définie, la valeur de secours rouge sera sélectionnée.

Voici une meilleure démonstration avec ce code :

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --couleur-primaire: #007bff;
        }
        .btn {
            background-color: var(--couleur-primaire, red);
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button class="btn">Cliquez-moi !</button>
</body>
</html>

Si vous l’affichez sur votre navigateur, voici ce que vous verrez :

Cependant, nous pouvons reprendre le même code et ne modifier qu’un seul caractère sur le sélecteur de bouton comme ceci :

.btn {
    background-color: var(--couleur-primair, red); /* J'ai mal orthographié couleur-primaire, je l'ai écrit couleur-primair */    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

Le navigateur affichera alors le résultat suivant :

Utiliser des variables de valeur dynamique et de valeur calculée en CSS

Les valeurs dynamiques sont mises à jour automatiquement en fonction de certains événements ou conditions, comme par exemple les saisies de l’utilisateur.

Examinons ce code :

<html>
  <head>
    <meta charset="UTF-8">
    <title>Variables CSS avec JavaScript</title>
    <style>
        :root {
            --couleur: #333; 
        }
        #color-input {
            margin-left: 1em;
        }
        #color-input {
           --couleur: var(--color-input);
        }
    </style>
  </head>
  <body>
    <label for="color-input">Choisissez une couleur :</label>
<input type="color" id="color-input">
  </body>
</html>

Le code ci-dessus effectue les actions suivantes :

  • Nous définissons une variable –couleur avec une valeur par défaut de #333 en utilisant le sélecteur :root.
  • Nous utilisons #color-input pour sélectionner l’élément d’entrée.
  • La valeur de –couleur est définie sur var(–color-input), ce qui signifie que la couleur est mise à jour à chaque fois que l’utilisateur sélectionne une nouvelle couleur à l’aide du sélecteur de couleurs.

Les valeurs calculées effectuent des opérations de calcul basées sur d’autres propriétés ou variables. Pour l’illustrer, nous pouvons utiliser ce code :

:root {
  --taille-police-base: 14px;
  --taille-police-entete: calc(var(--taille-police-base) * 3);
}
h2 {
  font-size: var(--taille-police-entete);
}

À partir de ce bloc de code, nous pouvons observer les points suivants :

  • Nous avons une variable –taille-police-base qui définit la taille de police de base.
  • Nous avons –taille-police-entete, qui est égale à 3 fois la valeur de –taille-police-base.
  • Nous avons un sélecteur h1 qui utilise var avec –taille-police-entete.
  • Par conséquent, tous les h1 de la page web seront trois fois plus grands que –taille-police-base.

Conclusion

Vous comprenez désormais comment utiliser les variables CSS pour accélérer le processus de développement et rédiger du code facile à maintenir. Vous pouvez employer des variables personnalisées avec HTML et des bibliothèques telles que React. Découvrez différentes approches que vous pouvez utiliser pour styliser React avec le CSS.

Vous pouvez consulter le code source ici.



Tweetez
Partagez
Épingle
Partagez
Partagez
0 Partages