Existe-t-il un moyen plus efficace d'écrire du CSS avec des classes ayant une relation un-à-plusieurs?

Question

Dans mon CSS, j'ai quelque chose comme ceci:

.classA .class1, 
.classA .class2, 
.classA .class3 a:hover, 
.classA .class4, 
.classA #id1, 
.classA .class5 
{ color: white;} 

.classA .class1, 
.classA .class6 
{ background-color: red;} 

etc ...

Depuis que je répète .classA tant, je me demandais s'il y a un moyen plus efficace d'écrire cela?

Mon cas d'utilisation:

Je styling différentes pages avec des éléments similaires, mais avec différentes combinaisons de couleurs. Donc plutôt que .classA j'ajoute une classe de .Orange à une page et disons, .vert à l'autre, .Blue à un tiers. Ensuite, j'applique respectivement les styles orange, vert et bleu aux éléments de ces pages.

.Orange .btn, 
.Orange .accordion-heading, 
.Orange .promo-box {color: orange; background: white;} 
.Orange h2 {color: orange;} 

.Green .btn, 
.Green .accordion-heading, 
.Green .promo-box {color: green; background: white;} 
.Green h2 {color: green;} 

Answer 1

Vous n'avez pas besoin de répéter .classA à moins que vous le souhaitez pour qu'il ait préséance sur les autres sélecteurs. Lorsque vous utilisez des sélecteurs en tandem, comme dans votre exemple, vous augmentez la spécificité de la règle. Par exemple, prenez le code suivant:

.classA .class1 {color:red;} 
.class1 {color:white;} 

<div class="classA"> 
    <div class="class1">Text</div> 
</div> 

Le résultat est un texte de couleur rouge depuis votre première règle est plus spécifique que la seconde, même si le second vient plus tard dans l'ordre source.

spécification CSS stipule que la priorité de sélection est soumis à trois facteurs, dans l'ordre:

1. Importance
2. Spécificité
3. de commande Source

Ainsi, la quantité de répétition de sélection est en grande partie jusqu'à la façon dont vous configurez votre feuille de style et le résultat souhaité. Plus d'informations ici:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance