CSS taktika protiv množenja klasa

Pozdrav,

krenemo znači raditi jedan lijepi uredni CSS file (kako to uvijek zamišljamo u početku, da mora i može biti uredno strukturiran)
…i sad imamo na stranici jedan gumbić koji skoro uvijek isto izgleda.
Ništa lakše, opišemo taj gumb klasom:

.btn{...}

…i sad uskoro skužimo da taj isti gumb nekad trebamo sa crnim slovima, a nekad sa sivim slovima, ništa lakše…umnožimo ga:

.btn_gray {...}
.btn_black{...}

…no onda skužimo da taj isti gumb se nekad treba pojavljivati sa margin top 5px a nekad sa 15px. No sad i ovaj crni i sivi želimo imati u obje varijante margina top:

.btn_gray_m5{...}
.btn_gray_m15{...}
.btn_black_m5{...} 
.btn_black_m15{...}

…očito sljedeća mala varijanta našeg gumba će zahtjevati opet duplanje klasa…te bi u sljedećem koraku bi imali 8 klasa …itd.

Alternativu ovom vidim da se klase rascjepkaju…te da se gumb ne opisuje jednoznačno jednom klasom, nego kao skup određenih klasa koji tvore gumb:

<input type='button' class='btn1 m_t_mid col_gray r_small f12 p_mid bd2'>

// btn1 -> neke stalne stvari koje slijede naš gumb
//m_t_mid ->magring top middle
//col_gray -> color gray
//r_small  -> radijus small
//f12 ->font size 12px
//p_mid ->padding middle

Sad recimo padding middle gumb dijeli sa nekim drugim elementima koji također na ovaj način imaju padding middle…te kad odlučimo na stranici da su nam paddinzi preveliki, samo mijenjamo taj parametar padding middle koji se onda oslika na sve te elemente.

Kako vi pristupate ovoj problematici??

Upravo tako kako si opisao. Dodjeljivanjem vise klasa jednom elementu.
Npr.

<input type="button" class="btn btn-default radius" />

ili

<input type="button" class="btn btn-large btn-success"/>

Ista stvar i sa mnom.Vise klasa, nema tu neke prevelike mudrosti.

Onda mi je srce mirnije :slight_smile: