Whats are needs of grouping CSS selectors - css

Question

I'm learning CSS and I found this syntax to group multiple selectors:
element-1, element-2 {
/* css declarations */
}
This means that the elements are in the same styling, so why don't we give them the same class? Is there any recommendations?

Answer 1

While there are probably many reasoning behind a general syntax decision, I could at least name one. Take the following example:
ul, li, p {
padding: 0; margin: 0;
}
Sometimes when you are resetting styles across different elements, you can use ,. You may group those using classes, but that would mean you need adding a class like .no-padding to each and every ul, li, p.
Not neat.

Answer 2

You can write the CSS rules without group of selectors, but you can minimize your CSS code with these groups. See the following example:
.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 3

Here is another illustration to join the two already featured (by Dai and sebastianbrosch)
Say you have a class that sets some values for an HTML element:
.someClass {
font-size:1.1rem;
color:#c00;
border: 2px solid #000;
padding: 1vh 1vw;
}
And just suppose you have another element (.someOtherElement)which you want to have the same font-size as someClass, and the same colour, same padding but no border?
Option 1:
Write everything out twice:
.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: Don't write everything out twice:
.someClass, .someOtherElement {
font-size:1.1rem;
color:#c00;
padding: 1vh 1vw;
}
.someClass {
border: 2px solid #000;
}
This more closely follows the DRY principles of programming and allows for immense flexibility, applying various rules to as many or as few identifiers as needed.