Cum să numești selectorii CSS

Una din persoanele cu care am colaborat în trecut, mi-a pus doar denumiri de genul red-arrow, green-bullet etc. Totul a fost bine până când clientul a venit cu mici modificări ce țin de culori. Rezultatul arată cam așa:

• red-cross.png este albastru (o nuanță de fapt)
• red-bullet.png este verde
• black-arrow-right.png este galben
• black-bg.png este gri
• .red-button este tot albastru
• .white-button este un gri închis

Și tot așa. Am o mulțime de imagini și selectori CSS care nu (mai) au nici o legătură cu realitatea.

Cum poți preveni astfel de rezultate?

Gândește-te un pic mai departe de ce faci în momentul ăsta. Unui buton albastru i s-ar potrivi clasa blue-button, dar i s-ar potrivi la fel de bine și primary-button. Și nu, nu vei avea nevoie de atât de multe butoane într-un site pentru a ajunge la denary-button. Din experiență îți spun că sunt foarte rare situațiile în care ai nevoie de mai mult de două-trei tipuri distincte pentru un element.

Clase multiple

Dacă tot veni vorba de butoane, uite încă o idee: dacă ai nevoie de două butoane care au aceeași culoare și, în mare, aceleași proprietăți (border, radius etc) dar diferă doar la… să zicem padding, poți folosi clase multiple. O clasă de bază și o clasă pentru ajustări:

.button {
  font-size:1.2em;
  padding:0 2em;
  line-height:1.5;
  color:white
}
.button.button-small { font-size:.8em; }
.button.button-extra-pad { padding:2em 4em; }
.button.button-big { font-size.2em; }

.button-primary { background:blue; }
.button-secondary { background:green; }
.button-tertiary {
  background:white;
  color:black;
}

De aici, pot ieși o mulțime de combinații:

<a href="#" class="button button-primary button-small">small button</a>
<a href="#" class="button button-secondary button-big">big button</a>
<a href="#" class="button button-tertiary button-big">big button</a>
[...]

Nu încalcă -small din numele clasei tot ce am zis mai sus?

Încalcă și nu prea. Tot din experiență pot spune că o culoare este mai predispusă la schimbări decât ceva ce afectează spațiul ocupat de un element (padding, dimensiunea fontului etc).