CSS Łączenie klas

Jak nazywa się te łączenie klas, które zastosowano tutaj w rangach? W span nr.1 jest cały kod, a w gid-8 jest tylko kolorek?

Nie spotkałem się, aby miało to jakąkolwiek nazwę. Pisanie wiele razy tego samego kodu w css jest swego rodzaju błędem (złym nawykiem) i powinno się tego unikać. Dlatego zamiast pisać np.:

.cos1{
  width: 115px;
  height: 30px;
  padding: 5px;
  color: darkred;
}
.cos2 {
  width: 115px;
  height: 30px;
  padding: 5px;
  color: yellow;
}

napiszemy:

.cos {
  width: 115px;
  height: 30px;
  padding: 5px;
}
.cos1 {
  color: darkred;
}
.cos2 {
  color: yellow;
}

Przydatne w przypadku wprowadzaniu zmian w szablonie w przyszłości.

Nie czaję tego :v
Czyli wszystko do teraz robiłem z błędami :/

Jeżeli wykorzystam Twoje css to w htmlu będzie wyglądać to tak:

<div class="cos cos1"></div> ?

Tak, dokładnie.

Zaraz napiszę inny (lepszy) przykład.

Ok, łap:
css:

.box { width: 75%; border: 1px solid black; border-radius: 3px; padding: 5px; box-sizing: border-box; }
.warning { background: rgba(220, 20, 20, 0.7); }
.new-pm { background: rgba(189, 183, 107, 0.7); }

html:

<div class="box warning">Otrzymałeś ostrzeżenie!</div>
<div class="box new-pm">Otrzymałeś nową prywatną wiadomość!</div>

Dzięki temu edytujesz każdy box w jednej klasie, a nie w każdej z osobna.