Was sind Bedürfnisse der Gruppierung CSS-Selektoren

Question

ich CSS lerne und ich fand diese Syntax zum Gruppieren mehrerer Selektoren:

element-1, element-2 { 
    /* css declarations */ 
} 

Dies bedeutet, dass die Elemente in der gleichen Styling sind, also warum wir nicht geben sie die gleiche Klasse? Gibt es Empfehlungen?

Answer 1

Sie können die CSS-Regeln ohne Gruppe von Selektoren schreiben, aber Sie können Ihren CSS-Code mit diesen Gruppen minimieren. Siehe das folgende Beispiel:

.one, .two { 
 
    color:red; 
 
} 
 
.two { 
 
    text-decoration:underline; 
 
} 
 

 
/** not optimized/no selector group */ 
 
.oneone { 
 
    color:red; 
 
} 
 
.twotwo { 
 
    color:red; 
 
    text-decoration:underline; 
 
}

<p class="one">Hello World #1</p> 
 
<div class="two">Hello World #2</div> 
 

 
<p class="oneone">Hello World #1</p> 
 
<div class="twotwo">Hello World #2</div>

Answer 2

Zwar gibt es wahrscheinlich viele Gründe für eine allgemeine Syntax Entscheidung sind, konnte ich zumindest Namen ein. Nehmen Sie das folgende Beispiel:

ul, li, p { 
    padding: 0; margin: 0; 
} 

Manchmal, wenn Sie Stile auf verschiedene Elemente zurücksetzen, können Sie , verwenden. Sie können Gruppen gruppieren, die Klassen verwenden, aber das würde bedeuten, dass Sie eine Klasse wie .no-padding zu jedem ul, li, p hinzufügen müssen.

Nicht sauber.

Answer 3

Hier ist eine weitere Darstellung, die die beiden bereits vorgestellten beizutreten (von Dai und sebastianbrosch)

Sagen Sie bitte eine Klasse, die einige Werte für ein HTML-Element setzt:

.someClass { 
    font-size:1.1rem; 
    color:#c00; 
    border: 2px solid #000; 
    padding: 1vh 1vw; 
} 

Und wenn nur Sie haben ein anderes Element (.someOtherElement), das Sie die gleiche Schriftgröße wie someClass haben möchten, und die gleiche Farbe, gleiche Polsterung aber keine Grenze?

Option 1: alles schreiben zweimal:

.someClass { 
    font-size:1.1rem; 
    color:#c00; 
    border: 2px solid #000; 
    padding: 1vh 1vw; 
} 
.someOtherElement { 
    font-size:1.1rem; 
    color:#c00; 
    padding: 1vh 1vw; 
} 

Option 2: Sie alles zweimal nicht schreiben:

.someClass, .someOtherElement { 
    font-size:1.1rem; 
    color:#c00; 
    padding: 1vh 1vw; 
} 
.someClass { 
    border: 2px solid #000; 
} 

Dieses enger folgt den DRY Prinzipien der Programmierung und ermöglicht eine immense Flexibilität, indem je nach Bedarf verschiedene Regeln auf so viele oder so wenige Bezeichner angewendet werden.