Que sont les variables CSS et pourquoi devriez-vous les utiliser

Qu'est-ce qu'une variable CSS ?

Les variables CSS (également appelées propriétés personnalisées CSS) sont des valeurs qui peuvent être stockées dans une feuille de style et réutilisées dans tout le document. Ils vous permettent de modifier dynamiquement les valeurs dans CSS, ce qui facilite la maintenance et la réutilisation des styles. Les variables CSS sont déclarées avec un préfixe —, suivi d'un nom et d'une valeur, et sont accessibles à l'aide de la fonction var(). Par exemple, pour créer une variable CSS, vous pouvez utiliser la syntaxe suivante dans votre attribut css :root comme suit :

:root {
  --main-color: blue;
}

.header {
  background-color: var(--main-color);
}

Puis-je accéder aux variables en JavaScript ?

Les exemples suivants montrent comment accéder et modifier la variable css permettant ainsi l'accès et la mutation en JavaScript :

// Access
getComputedStyle(document.documentElement).getPropertyValue('--main-color'); // blue

// Mutate
document.documentElement.style.setProperty('--main-color', 'pink');

Il existe plusieurs raisons pour lesquelles vous pouvez choisir d'utiliser des variables CSS.

Réutilisabilité : les variables CSS vous permettent de stocker des valeurs en un seul endroit, puis de les réutiliser dans votre feuille de style. Cela facilite la maintenance de vos styles et les met à jour de manière cohérente.

Style dynamique : avec les variables CSS, vous pouvez modifier les valeurs de manière dynamique, ce qui vous permet de créer des styles plus flexibles et interactifs. Par exemple, vous pouvez utiliser JavaScript pour modifier la valeur d'une variable CSS en fonction de l'interaction de l'utilisateur ou d'un design réactif.

Meilleure organisation : En utilisant les variables CSS, vous pouvez garder vos styles organisés et rendre votre code plus facile à comprendre. Par exemple, au lieu de coder en dur des valeurs à plusieurs endroits, vous pouvez les stocker dans un seul emplacement, ce qui facilite la visualisation des relations entre les valeurs et rend les modifications plus efficaces.

Amélioration des performances : L'utilisation de variables CSS peut également améliorer les performances de votre feuille de style. Comme les variables ne sont résolues qu'une seule fois, elles sont plus rapides que les sélecteurs CSS traditionnels, qui sont résolus à chaque fois qu'ils sont utilisés.

Résumé

Les variables CSS peuvent améliorer la maintenabilité, la lisibilité et les performances de votre feuille de style, ce qui en fait un outil utile pour le développement Web moderne.

Voir ceci sur YouTube :https://youtu.be/L8l0fSFX680

Bonne chance, n'hésitez pas à vous connecter et à me suivre.

Suivez-moi, s'il vous plaît

J'ai vécu en Californie toute ma vie. J'ai grandi dans la Silicon Valley et j'ai vu tant de choses changer.

N'hésitez pas à me suivre sur Medium et YouTube, j'ai des cours sur Udemy et je viens de commencer une nouvelle série intitulée "Développement rapide et simple" où vous pouvez apprendre de nouvelles technologies et compétences nécessaires pour vous aider à vous perfectionner sur le marché du travail d'aujourd'hui ou continuez simplement à gravir les échelons en ajoutant à vos côtelettes techniques.

https://www.youtube.com/@fastandsimpledevelopment

https://www.udemy.com/user/tomjay2

https://www.linkedin.com/in/thomas-d-jay

https://www.thomasjayconsulting.com/