Comprendre les variables CSS (et comment les utiliser)

Les variables CSS sont comme des ingrédients de conception réutilisables. Vous les définissez une fois, comme les couleurs de votre marque, les tailles de police ou l'espacement, puis les utilisez partout où cela est nécessaire. Ils vous évitent de taper les mêmes codes hexagonaux et les mêmes valeurs de pixels sur différentes sections.

Leur plus grand avantage est la facilité de mise à jour. Si vous mettez à jour une variable une fois, chaque endroit où il est utilisé reflétera également les modifications. Ainsi, non seulement vous évitez de répéter manuellement les mêmes valeurs sur plusieurs sections, mais vous pouvez également modifier l'ensemble de l'aspect du site Web en modifiant une seule valeur.

Voici où cela va encore mieux: avec Divi 5, vous n'avez pas besoin d'écrire de code pour utiliser les variables CSS. Les variables de conception de Divi vous permettent de les utiliser dans un flux de travail visuel sans code. Curieux de savoir comment ça marche? Continuez à lire.

Que sont les variables CSS?

Considérez les variables CSS comme des étiquettes personnalisées que vous créez pour vos propres habitudes de conception. Quel est votre rayon de bordure d'image récent? Combien d'espacement laissez-vous habituellement entre les sections? Avez-vous une couleur de bouton de signature que vous utilisez partout? Vous pouvez transformer tous ces styles uniques en variables CSS.

Ce ne sont pas des valeurs que le navigateur connaît par défaut. Tout est personnalisé. Vous décidez du nom, attribuez votre valeur préférée et utilisez-la où que vous souhaitiez. C'est comme créer votre propre raccourci qui rend le style plus rapide, plus propre et plus facile à mettre à jour plus tard.

Prenons un exemple. Supposons que vous souhaitiez que la couleur principale de votre site soit # 007BFF. Vous le déclarez comme ceci:

:root {
--primary-color: #007bff;
}

Ici, «–Primary-Color» est votre nom de variable, et «# 007BFF» est sa valeur. Vous venez de stocker une couleur à l'intérieur d'une étiquette personnalisée que le navigateur peut désormais reconnaître.

Pour l'utiliser, vous ne réécrivez pas le code hexadécimal. Vous appelez la variable à l'intérieur de la fonction var () comme celle-ci:

 button {
background-color: var(--primary-color);
}

Cette ligne de code garantit que votre bouton tire toujours la valeur de –Primary-coulor.

Maintenant, vous pouvez l'utiliser partout où il est nécessaire, et quand il est temps de mettre à jour la couleur de votre marque, il n'est pas nécessaire de fouiller dans des dizaines de fichiers. Changez simplement la variable une fois, et chaque élément dans lequel il est utilisé est mis à jour automatiquement. Par exemple, vos boutons, en-têtes et borders utilisent tous des couleurs primaires. Un seul édition les met à jour tous.

C'est ainsi que les variables CSS simplifient les mises à jour à l'échelle du site.

Comment fonctionnent les variables CSS

Pour déclarer une variable CSS, la syntaxe de base ressemble à ceci:

.root {
--name: value;
} 

Quelques choses à noter. Tout d'abord, une variable CSS commence toujours par deux tirets (-). C'est ainsi que le navigateur sait qu'il est personnalisé, quelque chose que vous avez défini pour votre système de conception.

Les propriétés CSS intégrées comme la taille de la police, la couleur ou le rembourrage ont déjà un sens. Le navigateur sait exactement quoi en faire. Mais les propriétés personnalisées sont des étiquettes vierges jusqu'à ce que vous leur attribuez une valeur. Vous créez vos propres règles de conception dans un projet de site Web, comme –Primary-Color, et dites au navigateur ce qu'il représente.

L'endroit où vous définissez vos variables CSS fait également une grande différence.

Lorsque vous le placez à l'intérieur du: sélecteur de racines (comme nous l'avons fait ci-dessus), il devient global. Cela signifie que vous pouvez utiliser la variable sur n'importe quelle page et élément. En effet: Root cible l'élément de niveau supérieur de votre HTML, généralement la balise <html>.

Mais si vous définissez la même variable dans une classe ou un sélecteur spécifique, cela ne fonctionne qu'à cet endroit. Comme ça:

 .card {
--bg-color: #f4f4f4;
} 

Ici, –BG-Color ne s'applique qu'à l'intérieur du sélecteur de cartes. Essayez de l'utiliser ailleurs, et il n'apparaîtra pas. Par exemple, ci-dessous, vous verrez deux cartes.

La carte 1 utilise une variable définie localement –card-bg déclarée à l'intérieur du conteneur. Cette variable ne fonctionne qu'à l'intérieur de ce conteneur. Il ne s'applique pas à la carte 3.

La carte 2, en revanche, tire son arrière-plan de –global couleur, qui est définie dans: root. C'est pourquoi Card 4 ramasse également la même couleur. Il a accès à la variable globale.

En tant que meilleure pratique, si vous voulez une cohérence sur l'ensemble de votre site, définissez toujours les valeurs CSS dans: root. Et si vous définissez une variable localement et que vous l'avez oublié, mais maintenant cela ne fonctionne pas comme prévu? Vous résumerez cela en définissant une valeur de secours. Nous en parlerons dans un moment.

Comprendre les variables CSS cascade

Vous connaissez peut-être le terme «cascade». Eh bien, les variables CSS sont également en cascade, mais qu'est-ce que cela signifie?

Si une variable est définie à la fois à l'échelle mondiale (dans: root) et localement (à l'intérieur d'une classe ou d'un conteneur), le navigateur utilisera toujours celui plus proche de l'élément. C'est ainsi que la cascade fonctionne dans CSS. Des règles plus étroites ont la priorité.

Et c'est exactement ainsi que fonctionne le mode sombre.

Par exemple, vous pouvez définir –Text-Color: Black In: Root. Mais à l'intérieur d'un récipient en mode .dark, vous pouvez le redéfinir comme blanc. Ainsi, lorsque l'utilisateur bascule sur l'option Mode Dark, le navigateur utilisera la version locale à l'intérieur du mode .Dark, même si le nom de variable reste le même.

Cela vous permet de garder votre dénomination cohérente tout en ajustant les styles en fonction du contexte. C'est une façon dont les variables CSS vont au-delà de la simple réutilisabilité. Ils s'adaptent en fonction de l'endroit et de la façon dont ils sont utilisés.

Ajout d'une valeur de secours

Parfois, vous pouvez référencer une variable CSS qui n'est pas disponible. Peut-être qu'il n'a été défini que dans une section spécifique, ou qu'il a été supprimé par erreur. Lorsque cela se produit, le navigateur ne sait pas quoi faire. Les styles qui dépendent de cette variable ne seront tout simplement pas appliqués.

Vous pouvez ajouter une valeur de secours directement à l'intérieur de la fonction var () pour éviter cela. Il sert de sauvegarde au cas où la variable d'origine serait manquante. Voici comment cela fonctionne:

 h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
} 

Cela indique au navigateur d'utiliser - la tête de la tête si elle existe. Sinon, utilisez à la place Black (# 000).

Les replies sont particulièrement utiles lors de la construction de composants réutilisables ou du travail sur plusieurs sections où les variables peuvent ne pas toujours être disponibles. Ils gardent votre design stable et cohérent.

Vous pouvez même enchaîner les secours tels que la couleur: var (–Accent-couleur, var (–primary-color, # 333));

Ici, le navigateur vérifie d'abord la couleur-couleur. S'il manque, il essaie - le primaire-couleur. Si cela manque également, il est par défaut # 333. Cela donne à vos styles un filet de sécurité afin qu'ils continuent de rendre correctement même si certaines valeurs sont manquantes.

Une façon sans code d'utiliser les variables CSS dans Divi 5

Tout ce que vous avez vu à propos des variables CSS (le contrôle global, les valeurs réutilisables, la logique en cascade) sonne bien, mais elle est également livrée avec une prise: vous devez écrire et gérer le code. Pour de nombreux designers, ce n'est pas idéal. Et si vous préférez la conception visuelle? Cela signifie que vous ne pouvez pas utiliser les variables CSS, non? Faux.

Divi 5 vous donne une façon plus rapide et plus visuelle de travailler avec la même logique de variables CSS. Il introduit des variables de conception, une alternative sans code aux variables CSS construites directement dans le constructeur Divi.

Abonnez-vous à notre chaîne YouTube

Les variables de conception ( comme les variables CSS) sont des valeurs réutilisables que vous définissez une fois et utilisez sur votre site . Ce qui est différent, c'est comment vous le faites. Vous ne les définissez pas dans la feuille de style de votre site Web, mais dans Variable Manager à l'intérieur de Divi Builder, visuellement.

Comme les variables CSS, vous donnez un nom à une variable de conception et attribuez une valeur. Une fois enregistré, il devient disponible dans n'importe quel module qui prend en charge cette propriété.

L'application de la variable enregistrée est également facile. Localisez simplement l'icône du gestionnaire de variables en surbillonnant l'option Paramètres du module, en cliquant dessus pour remplir toutes vos variables enregistrées et en choisissant celui que vous souhaitez appliquer.

La meilleure partie des variables de conception est que non seulement les valeurs de conception, mais vous pouvez également enregistrer des valeurs de contenu répétables comme les images, les liens et les chaînes de texte. De cette façon, vous gérez efficacement le contenu répété en réutilisant des éléments de contenu communs sur tout votre site Web sans travail manuel.

Apprenez tout sur les variables de conception de Divi 5

Définir les variables CSS dans Divi 5

Cela signifie-t-il que les variables de conception remplacent les variables CSS? Pas exactement.

Les variables de conception sont idéales pour stocker les valeurs que vous utilisez souvent, comme les couleurs de la marque, mais tous les style ne doivent pas être mondiaux. Vous ne voudrez pas toujours enregistrer tous les ajustements mineurs en tant que variable de conception, surtout lorsqu'il est unique à une seule page.

Disons que vous créez une page de destination avec une section de héros personnalisée. La hauteur diffère de toute autre chose sur le site, et il est peu probable que vous la réutilisez. L'enregistrement en tant que variable de conception n'est pas la meilleure utilisation de votre bibliothèque mondiale. Dans ce cas, définir une variable CSS directement dans les paramètres de la page est un choix plus propre.

Il en va de même pour les dispositions complexes ou uniques. Vous avez peut-être besoin d'une couleur de surbrillance personnalisée ou d'une valeur d'espacement spécifique à la mise en page qui n'est pertinente que dans ce contexte. Au lieu d'observer votre système avec des variables que vous ne réutilisez jamais, vous pouvez définir les variables CSS là où vous en avez besoin.

Nous ne voulons pas que vous remplaciez les variables CSS par des variables de conception. Nous voulons que vous utilisiez le meilleur des deux.

C'est pourquoi Divi 5 facilite la définition des variables CSS. Vous pouvez facilement déclarer vos propres variables CSS à l'intérieur des paramètres de la page> Avancé> CSS personnalisé , tout comme vous le feriez dans CSS ordinaire.

Mais nous simplifions leur application pour vous. Une fois défini, vous pouvez utiliser ces variables sur cette page. Accédez à n'importe quel module, choisissez CSS VAR dans la liste déroulante des unités avancées et entrez le nom de la variable dans la fonction var ().

Cette approche vous donne une flexibilité en cas de besoin, sans vous forcer à tout commettre dans le système de variables de conception visuelle. C'est un équilibre entre la structure et la liberté créative.

Utilisation de variables CSS dans Divi 5

Comment divi 5 rend les flux de travail variables CSS sans effort

Maintenant que vous savez ce que sont les variables CSS et comment Divi 5 les soutient visuellement, voici pourquoi cela compte vraiment. Ce n'est pas seulement parce que Divi vous donne deux façons d'utiliser les variables CSS. C'est parce que cela les fait s'intégrer en douceur à votre flux de travail.

Vous pouvez facilement utiliser des variables CSS avec des fonctionnalités puissantes telles que les variables de conception, les préréglages de groupe d'options et les unités avancées. Vous obtenez toujours toute la flexibilité et l'évolutivité des CSS traditionnels, mais sans écrire une seule ligne de code à moins que vous ne choisissiez.

Passons à la façon dont Divi 5 donne vie à ce flux de travail.

1. Créez votre cadre de conception

Les variables de conception sont vraiment puissantes car vous pouvez construire visuellement votre cadre de conception, donc le style d'une page ne nécessite que quelques clics. Nous vous recommandons de commencer avec vos éléments de conception de base, comme les tailles de police, les unités d'espacement et les couleurs de la marque, vous les avez donc toutes en un seul endroit.

Ensuite, vous pouvez également enregistrer du contenu fréquemment utilisé comme les chaînes de texte, les URL et les images. Par exemple, un motif d'arrière-plan commun qui se répète dans différentes sections, liens de médias sociaux, e-mail, adresse, etc.

Une fois que vous avez votre cadre en place, tout devient plus facile. Vous n'avez pas besoin de revenir à une feuille de style racine pour trouver une variable ou rappeler des noms exacts. Divi les organise pour vous: couleurs dans l'onglet Couleurs , polices dans l'onglet Font et tous accessibles à l'intérieur du gestionnaire de variables .

Et lorsque votre site a besoin d'une mise à jour de conception, vous ne perdez pas de temps à modifier le module par module ou à parcourir une longue feuille de style. Vous metterez à jour votre valeur enregistrée dans le gestionnaire de variables une fois, et vos modifications s'appliquent instantanément sur chaque instance.

Le même contrôle de niveau CSS, mais sans avoir besoin de mémoriser, d'écrire ou de déboguer quoi que ce soit.

2. Utilisez des préréglages de groupe d'options pour un style flexible

Les préréglages du groupe d'options vous donnent un contrôle plus détaillé sur votre système de conception. Au lieu d'appliquer un seul ensemble de styles sur votre site, vous pouvez créer plusieurs groupes de choix de conception pour différents cas d'utilisation, tous construits à partir des mêmes variables de conception de base.

Ici, vous superposez des styles. Vous définissez vos valeurs fondamentales une fois dans le gestionnaire de variables, puis créez des préréglages différents qui tirent de ces valeurs mais les appliquez de manière légèrement différentes. Si vous mettez à jour une valeur de variable enregistrée, le changement reflète instantanément tous vos préréglages et les modules où ils sont appliqués.

Ce système de conception basé sur prédéfini vous aide à créer des combinaisons de style illimitées. Par exemple, vous pouvez avoir un style de cap pour votre héros de page d'accueil et un autre pour les titres de blog, à la fois en utilisant la même variable de taille de police, mais avec des transformations d'espacement, de poids ou de texte différents.

La structure reste propre. Le style reste cohérent. Et en cas de besoin, vous pouvez remplacer n'importe quel préréglage au niveau du module. Vous obtenez donc un contrôle à l'échelle du système sans perdre la liberté de création.

3. Déclarer les variables CSS personnalisées pour plus de contrôle

Comme vous le savez, Divi ne vous enferme pas du contrôle avancé. Si vous souhaitez définir vos propres variables CSS, vous pouvez absolument le faire via les paramètres de page> Advanced> CSS personnalisé. Mais ce n'est pas la partie amusante.

Ce qui est amusant, c'est qu'il vous permet d'utiliser des fonctions CSS puissantes comme CLAMP () et CAL () (grâce aux unités avancées) pour construire des dispositions liquides et réactives visuellement. Vous pouvez également utiliser vos variables CSS enregistrées comme valeurs pour vos variables de conception.

Cela vous aide à créer un système de conception plus interconnecté. Votre logique CSS et votre style visuel n'existent plus dans des silos séparés. Vous pouvez définir une valeur une fois dans CSS et en tirer visuellement partout où il est nécessaire. Il maintient votre flux de workflow, évolutif et facile à entretenir.

Vous trouverez peut-être tout cela écrasant, mais une fois que vous comprenez comment cela fonctionne ensemble, il n'y a pas de retour en arrière. Cela change la façon dont vous concevez, pensez et construisez. Ce qui commence comme un système de variables devient rapidement votre langage de conception. Et oui, ces outils sont puissants, mais ils sont censés être façonnés autour de votre processus. Prenez votre temps, explorez ce qui correspond à votre style et créez un workflow qui fonctionne pour vous.

Divi propose une approche intégrée pour les variables CSS

La conception avec des variables CSS signifiait le choix entre la flexibilité et la complexité. Divi 5 efface cela et apporte toute la puissance des variables, du contrôle visuel, des mises à jour à l'échelle du site et de la logique en couches dans un flux de travail intuitif et évolutif.

Vous n'avez pas à choisir entre CSS personnalisé et la conception sans code. Vous pouvez mélanger, faire correspondre et faire évoluer votre système à mesure que vos projets se développent. Et une fois que vous voyez à quel point cela peut être fluide et puissant, il est difficile d'imaginer construire une autre manière. Mais pour cela, vous devez prendre le contrôle entre vos mains.

Essayez Divi 5 par vous-même et construisez un système de conception qui fonctionne avec vous, pas contre vous.