prägnante CSS sowohl aktuelle als auch untergeordnete Elemente wählen

Question

Übersicht

Im Rahmen eines allgemeinen CSS-Framework, habe ich eine Vielzahl von Kontrollen gebaut. Ich möchte sie mit generischen und flexiblen Klassen in den Markenfarben gestalten und gleichzeitig mein CSS so klein wie möglich halten.

Aufgrund der Anzahl der Elemente und Steuerelemente, die ich stylen muss, ist die CSS-Datei voll mit markenorientierten Stilen. Für die Umsetzung der flexiblen Struktur Ich wünsche, es sieht aus wie ich zu Double-up haben werden (oder Triple-up) jede einzelne Marke Regel von

.brand.brand-red .control.brand-control { color: red; } 

in

.brand.brand-red .control.brand-control,  /* Required */ 
.brand .brand-red .control.brand-control,  /* Required */ 
.brand .brand-red.control.brand-control { /* Useful */ 
    color: red; 
} 

Dies ist weniger als ideal , da es die Gesamtgröße meiner CSS-Datei, die ich unbedingt so klein wie möglich halten möchte, fast verdreifachen würde. Gibt es eine Möglichkeit, den zweiten CSS-Block kleiner zu schreiben?

Idealerweise würde ich in der Lage sein, so etwas zu tun:

.brand & .brand-red.control & .brand-control { ... } 
    /* or */ 
.brand/.brand-red.control/.brand-control { ... } 

aber ich bin mir ziemlich sicher, dass nichts für diese Art der Sache existiert noch, wenn es jemals wird.

Zusammenfassung

Ich würde meine generische CSS so klein wie möglich mögen, aber für alle folgenden Strukturen noch arbeiten:

/* COLOURS // BRAND COLOURS */ 
 
.brand.brand-red .control.brand-control,  /* Required */ 
 
.brand .brand-red .control.brand-control,  /* Required */ 
 
.brand .brand-red.control.brand-control { /* Useful */ 
 
    color: red; 
 
} 
 

 
.brand.brand-red.control.brand-control {  /* Not Required */ 
 
    color: red; 
 
}

<div class="brand brand-red"> 
 
    <div class="control brand-control">Test 1 // Required</div> 
 
</div> 
 

 
<div class="brand"> 
 
    <div class="brand-red"> 
 
     <div class="control brand-control">Test 2 // Required</div> 
 
    </div> 
 
</div> 
 

 
<div class="brand"> 
 
    <div class="brand-red control brand-control">Test 3 // Useful</div> 
 
</div> 
 

 
<div class="brand brand-red control brand-control">Test 4 // Not Required</div>

Referenz:

W3Schools // CSS Selectors Reference

Answer 1

Was Sie gerade versuchen zu erreichen, nicht möglich ist, CSS-Selektoren verwenden.

können Sie Ziel:

• .parent-class.another-parent-class
• .parent-class > .direct-child-class
• .parent-class .descendant-class
• Und natürlich eine Menge anderer cool options ...

Aber leider haben Sie nicht eine Option zum Auswählen eines Elternelements mit einer anderen Klasse, die verwendet werden kann d, oder auf einem seiner Nachkommen.

Sorry :-)

Answer 2

Auf jeden Fall verwenden Sie .brand-rot

.brand-red { 
 
    color: red; 
 
}

<div class="brand brand-red"> 
 
    <div class="control brand-control">Test 1 // Required</div> 
 
</div> 
 

 
<div class="brand"> 
 
    <div class="brand-red"> 
 
     <div class="control brand-control">Test 2 // Required</div> 
 
    </div> 
 
</div> 
 

 
<div class="brand"> 
 
    <div class="brand-red control brand-control">Test 3 // Useful</div> 
 
</div> 
 

 
<div class="brand brand-red control brand-control">Test 4 // Not Required</div>