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).

3 Comentarii to “Cum să numești selectorii CSS”

  1. Daca button (fara background) nu e folosit in mod normal, poti renunta la definitia button si sa folosesti [class^=”button-“], [class*=” button-“] pentru proprietati comune. Astfel nu esti nevoit sa repeti clasa “button” la fiecare… buton.

  2. primary, secundary,…, nary sunt greu de retinut. poti folosi info, warning, success, etc.

  3. @semeketh: numele date de tine sunt ok, dar nu sunt aplicabile în toate situațiile. De exmplu, warning e bun pentru un alert (sau notificare), dar nu pentru un titlu sau un buton.

    @Vilmos: De obicei folosesc SASS și nu îmi pun problema ăsta. Am impresia că selectorii ăștia nu sunt (foarte) suportați de IE<9 (parcă nu se descurcă foarte bine cu elementele injectate dinamic; dar e destul de posibil să mă înșel).

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter