Variables CSS en CSS pur - Mise en route en 5 minutes ou moins

Les variables CSS (ou officiellement : propriétés personnalisées ) en CSS pur sont un énorme gain de temps pour quiconque souhaite investir cinq minutes pour apprendre à les utiliser. Ils existent depuis CSS3 et 92 % de tous les utilisateurs ont des navigateurs qui les prennent en charge. L'utilisation de variables CSS ne nécessite aucune modification significative des feuilles de style existantes ou de nouveaux outils et peut être facilement appliquée à d'anciens projets. Au lieu d'avoir un code de couleur hexadécimal écrit à des centaines d'endroits dans un fichier, vous pouvez le définir à un seul endroit - avec une variable CSS. Un énorme gain de temps et une aide pour rendre les feuilles de style plus cohérentes.

Attendez, c'est Saas ou Moins, non ?

Non, on parle ici de CSS pur, pas de CSS couplé à un préprocesseur comme Saas, Less ou SCSS. L'utilisation de variables CSS ne nécessite aucun outil, éditeur ou modification supplémentaire dans votre flux de travail ou quoi que ce soit d'autre que vous utilisez. Par conséquent, les fichiers CSS existants sans variables ne nécessitent aucune modification "spéciale", et vous pouvez mélanger et assortir - utilisez des variables uniquement pour des parties du fichier, ou uniquement dans certains fichiers de votre projet.

Les préprocesseurs CSS comme Saas ou Less prennent également en charge les variables. En outre, ils ont beaucoup plus de fonctions et d'options que vous pouvez utiliser. Cependant, comme son nom l'indique, ils nécessitent un préprocesseur - un outil qui convertit le CSS écrit en Saas en CSS pur. Si vous n'avez besoin que de variables, le CSS pur a tout ce dont vous avez besoin.

Les variables CSS sont une fonction native, et c'est ce qui les rend géniales. Avec un minimum d'effort, vos feuilles de style sont beaucoup plus lisibles et cohérentes. De plus, toutes les modifications que vous devez effectuer ultérieurement sont beaucoup plus faciles à effectuer - certainement plus rapides que de faire une recherche et un remplacement lorsque vous devez modifier un code couleur à des centaines d'endroits .

Créons quelques variables

Comme dans tout langage de programmation, il y a deux étapes pour utiliser des variables : leur donner une valeur (les définir) et les utiliser (les mettre à tous les endroits où vous avez besoin de cette valeur). Nous ferons de même;

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

Si vous souhaitez utiliser une variable globalement (n'importe où) dans le fichier CSS, vous devez la définir dans la pseudo-classe :root . L'emplacement dans le fichier n'a pas d'importance. Cela peut être au début ou à la fin du fichier. Mais, vous devez mettre la variable dans :root . Le nom doit commencer par un double tiret -- ne peut contenir aucun espace. Les variables CSS peuvent contenir n'importe quelle valeur que vous attribuez habituellement à une propriété CSS ; des valeurs simples comme les couleurs aux expressions complexes pour les propriétés abrégées comme l'arrière-plan ou l'ombre.

Pour utiliser une variable (pour obtenir sa valeur), placez-la dans la fonction var() . N'oubliez pas que tous les noms de variables commencent par -- . C'est tout ce que vous devez savoir pour commencer.

Utiliser des valeurs de repli

Dans le cas où une variable n'est pas définie, une valeur de secours peut être fournie à la fonction var() comme deuxième paramètre.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

Ne vous inquiétez pas si la valeur de la propriété est complexe. Le paramètre fallback autorise les virgules (voir l'exemple box-shadow ). Il permet également le chaînage de plusieurs fonctions var() comme indiqué pour la couleur dans .custom-text . Si les --my-red et --my-blue ne sont pas définies, alors le rouge sera utilisé comme couleur.

Combiner var() et calc() fonctionne aussi, sans aucune surprise dans la syntaxe. Voici un exemple qui inclut une variable locale disponible uniquement dans la classe dans laquelle elle a été définie.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

Utilisez calc() avec parcimonie. Ce n'est pas une mauvaise chose, mais lorsqu'il est surutilisé, il devient assez problématique à déboguer et à entretenir.

Obtenir et définir des variables CSS via JavaScript

En utilisant du JavaScript simple, vous pouvez définir de nouvelles variables CSS et accéder à leurs valeurs. Je n'utilise pas cette méthode. Au lieu de cela, je préfère changer la classe de l'élément. Cependant, il n'y a rien de mal si vous souhaitez accéder aux variables CSS via JavaScript. C'est certainement utilisable dans certaines situations. Ceux qui s'en tiennent à jQuery peuvent convertir le code en un plugin jQuery.

Pour créer une nouvelle variable ou modifier la valeur d'une variable existante, utilisez :

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

L'accès à une variable est un peu plus complexe. Si la variable est définie via JS, utilisez :

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

Cependant, s'il est défini via CSS (et il le sera généralement), utilisez ce code :

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

Problèmes et éléments à surveiller

Maintenant que vous savez comment utiliser les variables, n'en faites pas trop et créez une variable pour chaque valeur de propriété dans la feuille de style. Par exemple, ce serait exagérer et abuser de tout le concept ;

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

Vous n'avez rien obtenu. Je viens d'avoir --spacing-10 au lieu de 10px . Vous finirez bientôt par créer vingt variables supplémentaires pour chaque valeur de pixel de remplissage comprise entre 5 px et 100 px. Si vous recherchez la cohérence, optez pour un concept --small-padding, --medium-padding, --large-padding et attribuez les valeurs numériques appropriées.

Bien que cela ne soit pas requis par la norme CSS, je suggère de tout cœur de définir toutes les variables en un seul endroit et au début du fichier CSS . De cette façon, vous saurez toujours où ils se trouvent et pourrez rapidement modifier les valeurs. Si vous éparpillez des définitions dans tout le fichier, vous aurez du mal à suivre les choses et pourriez finir par définir la même variable à plusieurs endroits. Le débogage ne sera pas une tâche amusante.

Il n'y a aucune raison de ne pas utiliser les variables CSS

Sur Internet, les choses avancent vite (comme le remplacement des cookies par le stockage local). Pour les grands projets et les grandes équipes, passer à des préprocesseurs CSS comme Saas est la bonne voie à suivre. Cependant, pour les petits projets ou les projets existants nécessitant une maintenance, les variables CSS en CSS pur sont la bonne solution . Ils ne nécessitent absolument aucune modification, mise à niveau de logiciel ou d'outil ou quoi que ce soit. Vous définissez une variable et commencez à l'utiliser.