Lorsque vous regroupez des sélecteurs CSS, vous appliquez les mêmes styles à plusieurs éléments différents sans répéter les styles dans votre feuille de style. Au lieu d'avoir deux, trois ou plusieurs règles CSS qui font la même chose (définir la couleur de quelque chose en rouge, par exemple), vous utilisez une seule règle CSS qui accomplit la même chose. Le secret de cette tactique d'amélioration de l'efficacité est la virgule.
Comment regrouper les sélecteurs CSS
Pour regrouper des sélecteurs CSS dans une feuille de style, utiliser des virgules pour séparer plusieurs sélecteurs groupés dans le style. Dans cet exemple, le style affecte les éléments p et div:
div, p { couleur: #f00; }
Dans ce contexte, une virgule signifie "et", donc ce sélecteur s'applique à tous les éléments de paragraphe et à tous les éléments de division. Si la virgule manquait, le sélecteur s'appliquerait à la place à tous les éléments de paragraphe qui sont un enfant d'une division. Il s'agit d'un autre type de sélecteur, la virgule est donc importante.
Vous pouvez grouper n'importe quelle forme de sélecteur avec n'importe quel autre sélecteur. Cet exemple regroupe un sélecteur de classe avec un sélecteur d'ID:
p.rouge, #sub { couleur: #f00; }
Ce style s'applique à tout paragraphe avec l'attribut class de rouge et tout élément (car le genre n'est pas spécifié) avec un attribut ID de sous.
Vous pouvez regrouper n'importe quel nombre de sélecteurs, y compris des sélecteurs qui sont des mots simples et des sélecteurs composés. Cet exemple comprend quatre sélecteurs différents:
p, .red, #sub, div a: link { color: #f00; }
Cette règle CSS s'appliquerait à:
- Tout élément de paragraphe
- Tout élément de la classe de rouge
- Tout élément avec un ID de sous
- le relier pseudo classe des éléments d'ancrage descendants d'une division.
Ce dernier sélecteur est un sélecteur composé. Comme indiqué, il se combine facilement avec les autres sélecteurs de cette règle CSS. La règle définit la couleur de #f00 (rouge) sur ces quatre sélecteurs, ce qui est préférable à l'écriture de quatre sélecteurs séparés pour arriver au même résultat.
N'importe quel sélecteur peut être groupé
Vous pouvez placer n'importe quel sélecteur valide dans un groupe, et tous les éléments du document qui correspondent à tous les éléments groupés auront le même style en fonction de cette propriété de style.
Certains concepteurs préfèrent énumérer les éléments groupés sur des lignes séparées pour la lisibilité du code. L'apparence sur le site Web et la vitesse de chargement restent les mêmes. Par exemple, vous pouvez combiner des styles séparés par des virgules en une propriété de style dans une ligne de code:
th, td, p.red, div#firstred { couleur: rouge; }
ou vous pouvez lister les styles sur des lignes individuelles pour plus de clarté:
e,
td,
p.rouge,
div#firstred
{
La couleur rouge;
}
Pourquoi grouper les sélecteurs CSS?
Le regroupement des sélecteurs CSS permet de minimiser la taille de votre feuille de style afin qu'elle se charge plus rapidement. Certes, les feuilles de style ne sont pas les principaux coupables d'un chargement lent; Les fichiers CSS sont des fichiers texte, donc même les feuilles CSS très longues sont minuscules par rapport aux images non optimisées. Pourtant, chaque optimisation est utile, et si vous pouvez réduire la taille de votre CSS et charger les pages beaucoup plus rapidement, c'est une bonne chose.
Le regroupement des sélecteurs rend également la maintenance du site beaucoup plus facile. Si vous devez apporter une modification, vous pouvez simplement modifier une seule règle CSS au lieu de plusieurs. Cette approche permet d'économiser du temps et des tracas.
L'essentiel: le regroupement des sélecteurs CSS améliore l'efficacité, la productivité, l'organisation et, dans certains cas, même la vitesse de chargement.