Pourquoi mes propriétés personnalisées CSS étendues sont-elles ignorées lorsqu'elles sont utilisées dans les calculs de portée externe ?

Propriété personnalisée de portée CSS ignorée lorsqu'elle est utilisée pour calculer une variable dans la portée externe

Lorsque vous essayez de créer du CSS composable et faiblement couplé, il est important de comprendre la portée des propriétés personnalisées. Dans certains scénarios, les modifications apportées à une propriété personnalisée de portée dans un élément enfant peuvent ne pas affecter l'élément parent comme prévu.

Un tel scénario se produit lorsqu'une propriété personnalisée est utilisée pour calculer une variable dans une portée externe. Le problème survient lorsque la propriété personnalisée est à nouveau définie dans l'élément enfant, ce qui entraîne l'ignorance de l'évaluation initiale de l'élément parent.

Pour illustrer cela, considérons l'exemple suivant :

:root {
  --size-1: calc(1 * var(--scale, 1) * 1rem);
  --size-2: calc(2 * var(--scale, 1) * 1rem);
  --size-3: calc(3 * var(--scale, 1) * 1rem);
}

.scale-1x {
  --scale: 1;
}

.scale-2x {
  --scale: 2;
}

.scale-3x {
  --scale: 3;
}

ol {
  font: 1em sans-serif;
}

.size-1 {
  font-size: var(--size-1);
}

.size-2 {
  font-size: var(--size-2);
}

.size-3 {
  font-size: var(--size-3);
}

Dans cet exemple, les propriétés --size-* sont calculées au niveau racine à l'aide de la propriété personnalisée --scale. Cependant, au sein des classes .scale-*, la propriété --scale est à nouveau définie. Cela entraîne l'ignorance de la valeur héritée de --scale de l'élément racine, ce qui entraîne le calcul des propriétés --size-* en utilisant la valeur par défaut de --scale : 1.

Pour éviter ce problème, il est essentiel de définir les propriétés personnalisées au niveau approprié et d'éviter de les redéfinir dans les éléments enfants. Cela garantit que les propriétés personnalisées étendues peuvent être utilisées efficacement pour calculer des variables dans des étendues externes et obtenir un CSS composable et faiblement couplé.

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!