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 verdeblack-arrow-right.png
este galbenblack-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).
- Posted in:
- Uncategorized
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.
primary, secundary,…, nary sunt greu de retinut. poti folosi info, warning, success, etc.
@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).