skracanie kodu CSS

Załóżmy, że mam taką stylizację:

.buttonStyleA {
  background-color: ...;
  height: ...;
  width: ...;
}
.buttonStyleB {
  background-color: ...;
  height: ...;
  width: ...;
}
.buttonStyleC {
  background-color: ...;
  height: ...;
  width: ...;
}

Czy w ramach ułatwienia sobie życia oraz skrócenia arkusza CSS można zrobić tak? Chodzi mi o tzw. dobrą praktykę.

.buttonStyleA, .buttonStyleB, .buttonStyleC {
  height: ...;
  width: ...;
}
.buttonStyleA {
  background-color: ...;
}
.buttonStyleB {
  background-color: ...;
}
.buttonStyleC {
  background-color: ...;
}

Można, chociaż ja bym się zastanowił nad tym, czy nie zrobić jakiejś bardziej generycznej klasy CSS np. .my-button

.my-button {
  height: ...;
  width: ...;
}

i potem elementom w HTMLu by się ustawiało 2 klasy naraz:

<button class="my-button my-button-primary">klikaj</button>

podobnie jak jest w Bootstrapie https://getbootstrap.com/docs/4.0/components/buttons/

dzięki temu można wyeliminować potrzebę powtarzania się w CSS .buttonStyleA, .buttonStyleB, .buttonStyleC
jednak stworzyliśmy potrzebę powtarzania się w HTML i konieczność przypisania kilku klas naraz. Co gorsze?

Ale myślę, że lekkie powtarzanie się nie musi być aż takim problemem.

Chociaż jeśli by próbować zlikwidować to powtarzanie, to np. w SCSS masz @extend, albo pracując na React(Vue, Angular) możesz stworzyć komponent, który będzie tworzył przycisk z odpowiednimi klasami, jeśli faktycznie byłaby potrzeba wyeliminowania tego powtarzania.

Istnieje jeszcze jedno rozwiązanie, które jest bardziej uniwersalne niż dodawanie klasy tylko, żeby zmienić jakąś właściwość. Możesz użyć dynamicznych zmiennych CSS, które pozwolą Ci przekazywać kolor tła bezpośrednio z HTML.

Podrzucam Ci przykład na CodePen: https://codepen.io/zerakot/pen/oNaxwdY

Nie wiem jak to się ma do dobrych praktyk CSS/HTML, może ktoś bardziej doświadczony coś powie od siebie na ten temat.

A co jeżeli jedną klasę chcę potraktować z wyjątkiem starając się dalej ograniczać ilość kodu? Mowa o buttonStyleA gdzie zadziała zasada last line of CSS code wins.

.buttonStyleA, .buttonStyleB, .buttonStyleC {
  height: ...;
  width: ...;
}
.buttonStyleA {
  background-color: ...;
  height: ...;
}
.buttonStyleB {
  background-color: ...;
}
.buttonStyleC {
  background-color: ...;
}

Rafałku a jest jeszcze jedna możliwość.
Każdy obiekt tworzysz indywidualnie, i każdemu dajesz odzielnie ustawienia. Jak chcesz potem wykonać działanie na wszystkich przyciskach to zbierasz je w tablicę i uruchamiasz pętlę.

function sUruchomLoad(){
sUruchom=document.createElement("BUTTON");
document.body.appendChild(sUruchom);
sUruchom.innerText="Uruchom";
sUruchom.langPl="Uruchom";
sUruchom.langEn="Execute";
sUruchom.defaultStyle="color:white;background-color:black;width:6%;height:3.1%;left:71.6%;top:0.2%;visibility:visible;position:absolute;display:fixed;border-top-right-radius:2px 2px;border-top-left-radius:2px 2px;";
sUruchom.defaultOnClick="run1(this);"
sUruchom.defaultId="run_id";
sUruchom.switchLang=function(){if(sUruchom.innerText=="Uruchom"){sUruchom.innerText=sUruchom.langEn;}else{sUruchom.innerText=sUruchom.langPl;};};
sUruchom.setAttribute("onclick",sUruchom.defaultOnClick);
sUruchom.setAttribute("style",sUruchom.defaultStyle);
sUruchom.setAttribute("id",sUruchom.defaultId);
sUruchom.workName="sUruchom";
sUruchom.initName="sUruchomLoad";
MainItemTable.push(sUruchom);
MainItemNameTable.push("sUruchom");
MainFunctionTable.push("sUruchomLoad");
sUruchom.pos=3;
sUruchom.objectList=[sUruchom.workName,sUruchom.initName,sUruchom.defaultStyle,sUruchom.pos];
sUruchom.objectListName=["workName","initName","defaultStyle","pos"];
sUruchom.view=function(pokazac){if(pokazac==1){sOutput.style.visibility="visible";};if(pokazac==0){sOutput.style.visibility="hidden";};};
sUruchom.switchView=function(){if(sUruchom.style.visibility=="visible"){sUruchom.style.visibility="hidden";}else{sUruchom.style.visibility="visible";};};};
run1=function(obiekt){Log+=numerek.toString();Log+=":sUruchom="+sInput.value+"\n";sLog.innerText=Log;numerek++;eval(sInput.value);};
run4=function(obiekt,wartosc){sHiddenInput.value=sDivsTable[visible_div-1].innerText;Log+=numerek.toString();Log+=":sDiv"+visible_div+"="+sHiddenInput.value+"\n";sLog.innerText=Log;numerek++;eval(sHiddenInput.value);};

To tworzy jeden przycisk.
Zobacz - wrzucam go do kilku tablic(wskaźnik do niego)

MainItemTable.push(sUruchom);
MainItemNameTable.push("sUruchom");
MainFunctionTable.push("sUruchomLoad");

Znaczy, że mam grupy do różnych operacji (np. zmiany języka - sUruchom.switchLang=function()).

Myślę że jest to trudne w utrzymaniu, bardzo trudno dotrzeć do realnych stylów jeśli są rozsiane w ten sposób.
Zrobisz arkusz typu:

a,b,c,d { width: 100px }
a,d,f,g,h { height: 110px }
d,c,d,e!important { width: 105px }

jeszcze najlepiej jak to będzie w różnych miejscach arkusza i spróbuj dojść do tego jaki finalny styl będzie użyty.

Moim zdaniem przede wszystkim warto użyć SCSS / SASS i np napisać:

%button {
  width: 100px;
  height: 1rem;
}

.buttonStyleA {
  @extend %button;
  background-color: #aaa;
}
.buttonStyleB {
  @extend %button;
  background-color: #bbb;
}
.buttonStyleC {
  @extend %button;
  background-color: #ccc;
}

kompiluje się to dokładnie do tego co napisałeś:

.buttonStyleA, .buttonStyleB, .buttonStyleC {
	width: 100px;
	height: 1rem;
}

.buttonStyleA {
	background-color: #aaa;
}

.buttonStyleB {
	background-color: #bbb;
}

.buttonStyleC {
	background-color: #ccc;
}

ale dużo łatwiej dojść co się z czego bierze