Codezi CSS sau Sass? Nu repeta greșelile mele!

Codezi CSS sau Sass? Nu repeta greșelile mele!

S-au făcut vreo zece ani de când trăiesc doar din scris cod. Nu sunt sigur dacă îl scriu rău sau bine, cert este că încerc mereu să-l scriu cât de bine știu în acel moment. Faptul că mă uit pe cod scris acum câteva luni și văd locuri unde aș fi putut proceda altfel nu face decât să mă bucure: nu m-am oprit din învățat.

Prin urmare, dacă ești la început de drum, vreau să-ți dau câteva sfaturi – bazate pe experiența mea – ce sper că te vor ajuta.

Nu folosi selectori „deștepți”

Când eram mai „mic” credeam că e rușine să adaug clase în HTML, astfel încât îmi ieșeau selectori foarte… îmbârligați: .footer > div > .widget + .widget > .title ~ div .icon nu era ceva de care m-aș fi ferit. Ba chiar n-aș fi văzut nimic în neregulă aici!

De ce e de evitat? În primul rând, se setează o specificitate foarte mare pentru elementele selectate (iar de aici până la !important e doar un pas mic).

În al doilea rând, se face o legătură foarte strânsă între markup și CSS, iar asta nu e chiar ceva ce-ți dorești, mai ales dacă lucrezi într-o echipă iar cel ce va implementa HTML-ul mai departe nu este foarte… ahem, atent.

Și, în al treilea rând, e mai ușor de citit! Cum ar arăta un selector de forma .footerWidget__icon ? Nu e mai drăguț?

Nu abuza de parent selector în Sass

Unul din lucrurile mișto din Sass este că poți folosi & pentru a refolosi clasa „părinte” (vezi aici cum). De exemplu, codul

.foo {
  &.bar {}
  &-baz {}
}

Ar compila următorii selectori:

.foo.bar {}
.foo-baz {}

Lucru care n-ar fi rău. Doar că proiectele au tendința de a crește, astfel încât a găsi ceva în cod va deveni din ce în ce mai complicat, iar Sass s-a transformat brusc dintr-o unealtă ce era acolo să te ajute, într-o unealtă a diavolului. Nu întreba de unde știu asta! :D

Folosește un framework, dar nu doar pentru că e la modă

Este valabil și pentru Bootstrap dar și pentru Zurb sau ce framework o fi la modă în momentul în care citești acest articol.

Cel mai răspândit framework CSS este, fără îndoială, Bootstrap. Este util? Da. În totalitate? Nu. De exemplu, nu are rost să încarci CSS pentru formulare sau componentele JS dacă nu ai de gând să le folosești. Idem și pentru butoane, icons, alerte etc.

Prin urmare, asigură-te că ai nevoie de fiecare componentă în parte. Eu prefer să instalez și să compilez manual bootstrap în functie de ce am nevoie, astfel încât în loc de 120kb încarc doar vreo 40kb. Sigur, cu gzip nu e o diferență prea mare (se ajunge la vreo 10kb), dar acest CSS trebuie interpretat indiferent dacă e sau nu folosit…

Cel mai important, fii sigur că înțelegi ce (și de ce!) face fiecare lucru din framework și că ai putea să faci și tu – de la zero! – ceva cu o funcționalitate asemănătoare.


În loc de concluzie: Întreabă (și nu lua de bun răspunsul)

Dacă ești la început de tot, cel mai probabil ai o grămadă de întrebări despre lucruri care nu au sens (e.g. de ce nu există nativ în CSS un parent selector?) iar când nu ai pe cine întreba îți poate genera rapid frustrări. Pentru asta caută pe cineva dispus să-ți răspundă la întrebări în privat sau publică pe cel mai tare forum de programatori, dar încearcă să verifici răspunsurile primite (i.e. nu le accepta la modul dogmatic).

4 Comentarii

Gigel Anonimu' a scris

Huh, la faza cu framework-ul nu-s de acord in totalitate. Adica daca folosesc un framework care-mi randeaza 3d ar trebuie sa inteleg toata matematica din spate si cum s-o implementez? E un tel laudabil dar nu prea practic.
As spune mai curand – intelege ce face absolut fiecare linie de cod din proiectul tau si intelege/stapaneste bine framework-ul folosit. Sunt o gramada de programatori copy/pasta care iau bucati de cod „magice” de pe Stack Overflow fara sa inteleaga cum functioneaza – cred ca asta desparte un programator bun de unul prost – nevoia aproape obsesiva de a intelege fiecare rotita din mecanism.

Bilen a scris

Doua lucruri vreau sa spun si eu. Una partial on topic si cealalta on topic.

In primul rand vreau sa imi torn cenusa pe cap si sa iti apreciez viziunea pentru ca noi ne cunoastem de mult timp si acum mai bine de 10 ani, cred ca vreo 12 cand ai ales drumul de front-end dev te-am luat putin in deradere. Pentru cei mai tineri care nu inteleg contextul pe vremea aceea, in fazele incipiente ale web designului de front end, intr-o agentie se ocupa fie designerul, fie back-end dev-ul, fie impreuna. Eu personal nu am crezut niciodata ca front-end dev o sa fie o slujba in sine si chiar una foarte apreciata.

In timp ce tu ai ramas de 12 ani in aceeasi bransa eu a fost cel care a trebuit sa pivoteze, ca multi altii de la UI la UX (care nu exista pe vremea noastra).

Si acum mai on topic, exista mai multe curente de gandire chiar si prin locurile pe unde am muncit eu. Multi nu sunt de acord cu framework-urile si asta pentru ca asa cum ai zis si tu poti ajunge ca la sfarsit de proiect sa te trezesti cu o gramada de componente pe care nu le-ai folosit si care iti ingreuneaza pachetul de asset-uri. Mie imi plac dar mi se pare foarte greu sa anticipez ce componente voi folosi si ce nu cand incep un proiect nou (btw eu imi folosesc skillurile de front-end doar pentru a crea prototipuri rapide pe care le testez cu utilizatorii, inainte de a da drumul la implementarea designului) asa ca pornesc cu pachetul intreg si simplific inainte de lansare cu: https://github.com/giakki/uncss

Ionuț Staicu a scris

@Bilen: uncss (sau alte unelte de optimizare automată) nu sunt foarte practice în site-uri dinamice (de exemplu, în WordPress/Joomla/Drupal/etc ar trebui să scaneze toate paginile site-ului; sunt cazuri în care specific o regulă în mod express pentru o anumită pagină sau un override pentru un plugin ce apare doar pe unele pagini etc)

Mulțumesc pentru apreciere.

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter