Comment utiliser les variables CSS pour tout dynamiser ?

Vous avez peut-être déjà vécu ce moment où vous souhaitiez changer la couleur principale d'un de vos projets ? Ou peut-être avez-vous déjà vécu ces moments où vous reveniez en arrière pour récupérer les couleurs du thème de votre site ? Tout ceci est long, et très peu pratique. Grâce aux variables CSS, ce sera un vieux souvenir ! Découvrons comment nous allons faire.

Partons d'un exemple

Rien n'est mieux que de partir d'un exemple concret pour apprendre quelque chose de nouveau. Ce que nous vous proposons, c'est de partir d'un site ayant deux divisions : l'une présente un titre de bienvenue, l'autre présente un texte avec des moyens de contact.

L'exemple est simplissime, mais notre objectif n'est pas de construire quelque chose de poussé : nous souhaitons juste apprendre à utiliser les variables CSS.

Voici donc le code :

<div class="bienvenue">
  <h1>Ce site utilise des <span>variables</span> CSS</h1>
</div>

<div class="contact">
  <p>Contactez-nous sur nos réseaux-sociaux :</p>
</div>

body {
  font-family: arial;
  background-color: #121416;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  color: yellow;
}

.bienvenue {
  background-color: green;
  padding: 15px;
  border-radius: 9px;
}

.contact {
  background-color: yellow;
  margin-top: 10px;
  border-radius: 9px;
  padding: 15px;
}

Ajoutons nos variables

Dans notre exemple basique, nous pouvons déjà constaté un problème : nous nous répétons sur de nombreuses valeurs.

• La couleur yellow qui pourrait être notre couleur principale ;
• La couleur green qui pourrait être notre couleur secondaire ;
• Les marges internes - padding - qui sont réutilisées à l'identique ;
• Les coins arrondis - border-radius - avec le même angle.

Tout ceci fonctionne bien, mais ce n'est pas viable sur de gros projets. N'oubliez pas notre principe fondateur en tant que développeur web :

Don't Repeat Yourself / Ne vous répétez pas.

Notre objectif serait donc d'isoler ces valeurs pour pouvoir les réutiliser partout. De cette manière nous allons créer des feuilles de style :

1. Cohérentes : avec les mêmes valeurs ;
2. Simples : sans devoir chercher les valeurs que nous avions utilisés ;
3. Lisibles : grâce aux noms des variables.

Pour ce faire, nous allons devoir utiliser :root. Ce sélecteur un peu particulier nous permet de stocker des variables qui seront disponibles dans toute notre feuille de style.

:root {
    /* Nos variables ici */
}

Nous allons devoir également créer des variables. Pour créer une variable, il suffit d'utiliser deux tirets -- suivi du nom de celle-ci, un nom que vous pouvez inventer et qui doit décrire ce que contient la variable, puis de l'accompagner de deux points : et de la valeur avec un point virgule ; pour finir.

:root {
    --maToutePremiereVariable: yellow;
}

Mais attend là tu utilises une écriture un peu spéciale ou je me trompe ?

Tout à fait. Pour créer une variable, vous pouvez lui donner le nom que vous voulez et l'écrire de la façon que vous le souhaitez, mais il y a une convention qui existe (une convention est une règle qu'il est bien de respecter mais qui, si elle n'est pas respectée, ne pénalisera pas votre projet et ne l'empêchera pas de bien fonctionner) : le camel case.

Cette règle dit qu'une variable doit commencer par une minuscule, et que chaque mot doit commencer par une majuscule derrière. Voici des exemples :

:root {
    --maToutePremiereVariable: yellow; /* correct */

    --MaToutePremiereVariable: yellow; /* incorrect */
    --matoutepremierevariable: yellow; /* incorrect */
    --MATOUTEPREMIEREVARIABLE: yellow; /* incorrect */
    --maTouTePreMIEReVariable: yellow; /* incorrect */
}

Bon, nous savons comment écrire une variable et nous avons appris ce que voulait dire le camel case. Nous ne savons néanmoins toujours pas comment l'utiliser.

Pour utiliser une variable, il suffit de l'appeler.

Et pour l'appeler, nous devons prévenir le navigateur que nous souhaitons utiliser une variable en précisant var() à la place de la valeur. Voici un exemple.

:root {
    --couleurPrincipale: yellow;
}

h1 {
    color: var(--couleurPrincipale);
}

Nous commençons par créer une variable --couleur-principale et nous utilisons sa valeur en l'appelant avec var(--couleur-principale). Simple non ? Voici ce que donnerait notre exemple précédent avec des variables.

:root {
  --couleurPrincipale: yellow;
  --couleurSecondaire: green;
  --padding: 15px;
  --borderRadius: 9px;
}

body {
  font-family: arial;
  background-color: #121416;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  color: var(--couleurPrincipale);
}

.bienvenue {
  background-color: var(--couleurSecondaire, purple);
  padding: var(--padding);
  border-radius: var(--borderRadius);
}

.contact {
  background-color: var(--couleurPrincipale);
  margin-top: 10px;
  border-radius: var(--borderRadius);
  padding: var(--padding);
}

Vous disposez maintenant d'un code cohérent, simple et surtout très lisible.

Les valeurs de secours

Il y a encore mieux, avec les variables : les valeurs de secours.

Nous ne sommes jamais vraiment à l'abri d'une variable qui n'existerait plus, ou d'une faute de frappe. Pour éviter ces soucis, nous pouvons préciser une valeur à utiliser si la variable n'existe pas.

Voici comment l'utiliser :

.contact {
  /* --- */
  padding: var(--padding, 5px);
}

Si nous avons une variable --padding tout va bien, mais si nous la supprimons, alors le padding utilisera la valeur de secours.

Nous aurons ainsi 5px.

Conclusion

Vous maîtrisez maintenant tout ce qu'il faut savoir pour utiliser les variables CSS ! Si vous souhaitez en savoir plus sur le HTML et le CSS, nous avons une formation complète dédiée à ces deux langages de programmation. N'hésitez pas non plus à partager cet article à votre entourage sur vos réseaux-sociaux. Merci !