Étendue des variables CSS pour créer des composants d’interface utilisateur

Le vrai nom du Variables CSS est Propriétés personnalisées CSS est un projet de norme (oui, quand j’ai écrit ces lignes, c’est sur l’instantané de la recommandation candidate), mais il est largement supporté par les navigateurs modernes.

Les variables CSS nous permettent, comme un autre type de variable dans un autre langage de programmation, de stocker une valeur que nous pouvons réutiliser dans notre document.

Par exemple, si nous définissons une variable CSS pour la couleur primaire en procédant comme suit : --primary-color: #f00;alors nous pouvons l’utiliser dans n’importe quel composant comme :

.my-component {
  color: var(--primary-color);
}

Habituellement, vous « attachez » votre variable à :rootce qui signifie que la variable sera disponible dans tout le document

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

Dans cet exemple :root est la portée variable.

Utiliser ensemble SCSS

Si vous souhaitez affecter des valeurs de variables SCSS à des variables CSS, vous ne pouvez pas faire la notation « normale » :

// ❌ This doesn't work
$scss-var: #f00;
--my-var: $scss-var;

Dans l’exemple, la valeur de --my-var est littéralement $scss-varpas la valeur de $scss-varce comportement a été fait pour fournir une compatibilité maximale avec le CSS ordinaire.

Pour que cela fonctionne, vous devez utiliser la syntaxe d’interpolation Sass : #{my scss script code}:

// ✅ This works
$scss-var: #f00;
--my-var: #{$scss-var};

Portée

Les variables ne sont disponibles que dans l’élément où elles sont définies et ses enfants ; c’est la portée de la variable. En dehors de là, la variable n’existe pas.

Si vous essayez d’accéder pour utiliser une variable qui n’est pas dans la portée, vous n’obtiendrez pas d’erreur, mais la propriété qui utilise la variable non existante sera ignorée.

Levage

Comme les variables JS, les variables CSS sont déplacées vers le haut, vous pouvez donc les utiliser avant de les définir.

.my-element {
  color: var(--primary-color);
}
:root {
  --primary-color: #f00;
}

Passer outre

Comme je l’ai mentionné précédemment, les variables ont une portée là où la variable existe, mais : que se passe-t-il si une variable portant le même nom est définie dans deux portées : cela se passe comme dans une variable JS ; la portée locale proche remplace les autres valeurs :

:root {
  --color: #0f0;
}
    
.my-element {
  --color: #0ff;
  color: var(--color);
}

Ce comportement est très pratique lorsque nous travaillons avec des composants d’interface utilisateur avec des styles différents en fonction des modificateurs.

Variables CSS dans les composants de l’interface utilisateur

Imaginez que nous ayons un simple composant de bouton comme celui-là.

<button class="ui-button">
  Button content
</button>

.ui-button {
  background: #333;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
}

Ce bouton a différentes variantes de couleur (par défaut, rouge et vert) et de taille (par défaut, petit et grand) ; en utilisant BEM, nous pouvons ajouter une classe de modificateur comme .ui-button--green ou .ui-button--big et utilisez-le pour écraser les styles, par exemple :

.ui-button {
  background: #333;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  
  &--green {
    background: #1F715F; 
  }

  &--big {
    font-size: 16px;
    padding: 6px 20px;
  }
}

Cette méthode fonctionne parfaitement, mais nous devons savoir quelles propriétés écraser et le faire explicitement pour chaque modificateur, il est donc facile d’oublier quelque chose, ou si nous devons ajouter une nouvelle propriété affectée par les modificateurs, ajoutez-la dans tous d’eux

Supposons que nous réécrivions les styles à l’aide de variables CSS, en paramétrant les styles des composants. Dans ce cas, nous pouvons remplacer les valeurs des variables CSS pour chaque modificateur sans changer les styles CSS eux-mêmes pour les modificateurs, en changeant uniquement la valeur des variables :

.ui-button {
  --bg-color: #333;
  --text-color: #fff;
  --font-size: 12px;
  --padding: 4px 10px;
  
  background: var(--bg-color);
  color: var(--text-color);
  font-size: var(--font-size);
  padding: var(--padding);

  &--green {
    --bg-color: #1F715F;
  }

  &--red {
    --bg-color: #0ff;
  }

  &--big {
    --font-size: 16px;
    --padding: 6px 20px;
  }

  &--small {
    --font-size: 10px;
    --padding: 3px 5px;
  }
}

Priorité de portée variable

En CSS, les éléments peuvent utiliser plus d’une classe, ce qui signifie que les variables CSS de l’élément ont plusieurs portées au même niveau ; par exemple, si nous appliquons les modificateurs vert et rouge en même temps

<button class="ui-button ui-button--green ui-button--red">
  Green + red
</button>

Les deux ui-button--green et ui-button--red définir le même --bg-color variable, Quelle valeur sera appliquée à l’élément ?

Dans de tels cas, l’ordre des classes est la priorité, donc la dernière classe utilisée remplace la dernière valeur et sa valeur est appliquée ; dans l’exemple, le bouton sera rouge, mais pour <button class="ui-button ui-button--red ui-button--green"> le bouton sera vert.

Résumé

L’utilisation de variables et de portées CSS est un outil puissant lorsque vous développez des composants en général. Néanmoins, si vos composants ont des modificateurs, cela nécessite un travail supplémentaire au début pour paramétrer le composant, mais après cela, il est plus simple de créer des variantes et des modificateurs.