Variables CSS – Rationaliser vos feuilles de style

Conférence 17 : Variables CSS – Rationaliser vos feuilles de style

Dans cette conférence, nous découvrirons les Variables CSS (également appelées propriétés personnalisées) et comment elles aident à simplifier votre code en vous permettant de réutiliser les valeurs dans votre feuille de style.

1. Que sont les variables CSS ?

Les variables CSS vous permettent de stocker des valeurs telles que les couleurs, la taille des polices ou l'espacement dans un emplacement central et de les réutiliser dans votre feuille de style. Cela rend votre code plus maintenable, car vous pouvez facilement mettre à jour les valeurs en un seul endroit au lieu de rechercher dans toute la feuille de style.

Les variables CSS sont définies avec un préfixe -- et vous pouvez y accéder avec la fonction var().

2. Définir des variables CSS

Les variables CSS sont généralement définies dans le sélecteur :root, qui représente le niveau supérieur du document.

Exemple :

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}

body {
    font-size: var(--font-size);
    color: var(--primary-color);
}

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

Dans cet exemple :

• Nous définissons --primary-color, --secondary-color et --font-size comme variables personnalisées.
• Ces variables sont ensuite utilisées dans les styles body et h1 avec la fonction var().

3. Avantages de l'utilisation de variables CSS

• Réutilisabilité : vous pouvez réutiliser les mêmes valeurs dans toute votre feuille de style, réduisant ainsi la duplication de code.
• Maintenabilité : Si vous devez modifier une couleur ou une taille de police, il vous suffit de mettre à jour la valeur de la variable à un seul endroit.
• Mises à jour dynamiques : les variables CSS peuvent être mises à jour dynamiquement à l'aide de JavaScript, permettant plus de flexibilité dans la création de conceptions interactives.

4. Remplacement des variables CSS

Vous pouvez remplacer les variables CSS dans des sélecteurs spécifiques pour fournir des valeurs spécifiques au contexte.

Exemple :

:root {
    --primary-color: #3498db;
}

.dark-mode {
    --primary-color: #34495e;
}

body {
    color: var(--primary-color);
}

Dans cet exemple, le --primary-color est remplacé lorsque la classe .dark-mode est appliquée. Cela vous permet de basculer entre différentes combinaisons de couleurs (par exemple, le mode clair et le mode sombre) sans effort.

5. Utiliser des variables avec des requêtes multimédias

Les variables CSS fonctionnent bien avec les requêtes multimédias, vous permettant d'ajuster les valeurs en fonction de la taille de l'écran.

Exemple :

:root {
    --font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}

body {
    font-size: var(--font-size);
}

Dans cet exemple, la variable --font-size est réduite sur les écrans plus petits, ce qui rend le texte plus lisible sur les appareils mobiles.

6. Valeurs de secours dans les variables CSS

Vous pouvez fournir des valeurs de secours pour les variables CSS au cas où la variable ne serait pas définie ou prise en charge par le navigateur.

Exemple :

body {
    font-size: var(--font-size, 18px);
}

Ici, si --font-size n'est pas défini, le navigateur utilisera par défaut 18px.

7. Variables et JavaScript

L'un des aspects les plus puissants des variables CSS est qu'elles peuvent être manipulées à l'aide de JavaScript, vous permettant ainsi de créer des styles dynamiques et interactifs.

Exemple :

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Dans cet exemple, la variable --primary-color est mise à jour vers une nouvelle couleur (#e74c3c) à l'aide de JavaScript, ce qui modifie dynamiquement le style de la page.

8. Cas d'utilisation pratiques

• Theming : utilisez des variables CSS pour créer des thèmes clairs et sombres pour votre site Web.
• Systèmes de conception : créez un système de conception cohérent en utilisant des variables pour les couleurs, l'espacement et la typographie.
• Interactions dynamiques : créez des éléments interactifs qui mettent à jour leurs styles en temps réel à l'aide de variables CSS et de JavaScript.

Conclusion

Les variables CSS offrent un moyen flexible de gérer vos styles, d'améliorer la maintenabilité du code et de permettre des mises à jour dynamiques. En incorporant des variables CSS dans votre flux de travail, vous pouvez rationaliser votre processus de développement et créer des feuilles de style plus maintenables et évolutives.

---

Suivez-moi sur LinkedIn

Ridoy Hasan

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!