CSS Review task

Cam ce ar trebui facut atunci când faci review la un slice. Nu ma refer strict la tool-uri gen: scss lint, csscss. Exista si alte tool-uri? Ce best practice-uri folosiți? Nu fac referire la testare (daca merge sau nu in browerul Y sau pe rezolutia a x b), ci la modul de implementare.

De exemplu, eu ma uit

  • ce se întâmplă când elimini un element,
  • sa nu fie așezări de layout cu posiition absolute
  • sa nu fie containere cu height 0

Aveți vreo lista de astfel de bullshit-uri? Exista tooluri pentru astea

Pentru a identifica containerele cu 0 height folosesc:

$('div,ul').filter(function(){ return !($(arguments[1]).height()>0)});

Problema cu containerele alea este următoarea: eu folosesc destul de des o metodă foarte interesantă pentru a mă asigura de un height proporționat cu lățimea disponibilă, mai ales în cazul embed-urilor:

http://iamntz.github.io/youtubeEmbed/

Realistic vorbind, în cazul unui site, slicing-ul nu e chiar o știință exactă, existând câteva modalități distincte de a duce la capăt toată povestea, mai ales dacă există comunicare (aproape) zero între designer și cel ce face slicing sau dacă designerul nu are experiență în a tăia un layout.

Când fac review la un cod scris de altul, mă uit la atlceva însă:

  • cât de specifici sunt selectorii: .foo vs div#bar ul#baz li .foo;
  • cât de specifice sunt numele: .sidebar vs .left-box, .primary-button vs .button-red șamd;
  • cât de organizat este codul în general (un element este împrăștiat prin n locuri sau într-un singur loc?);
  • sunt folosite shorthands sau măsuri nule cu unități ( e.g. 0px )

Cred că nu mai trebuia să menționez că vorbim de codul sursă (sass, less etc) nu de codul generat.

Eliminatul unui element poate că nu ar trebui să fie un criteriu.


În cazul unei aplicații, poate că lucrurile stau ușor diferit; se pot impune guidelines pentru design și se dezvoltă componente reutilizabile.

La ce ma refer cand zic eliminat: nu e normal sa depinda o componenta de alta in mod inutil.

Exemplu: daca sterg headerul sau footerul trebuie sa mearga Ok. Mi s-a intamplat odata cand stergeam ceva din header, se f***a tot site! daca scot sidebarul si tot layoutul e 100% pe width…sa nu imi lase spatiu liber (doar pentru ca a asezat cu left-padding)

Multe lucruri tin de testarea functionala si pe aia trebuie sa o faci de mana, dar sunt si multe lucruri pe care le poti automatiza.

Legat de tools, poti sa folosesti Casper JS si sa iti faci o suita de teste pe care sa o rulezi peste un HTML. Ca sa iti fie usor, poti sa faci un script in CLI caruia ii dai ca argument pagina sau folderul si sa rulezi teste pe el. De exemplu

run_tests.js --path /path/to/index.html

Pe langa ce ai enumerat, eu m-as mai uita dupa:

  • sa nu fie uitate instructiuni console.log (daca implica si js)
  • sa existe si sa fie corecte tag-urile de doctype, charset etc. Pentru doctype poti folosi un reg ex
  • sa nu existe taguri cu typo-uri (tot cu regex)
  • sa nu existe erori pe care browserele le tolereaza. detalii. astea sunt tricky pentru ca nu se vad cu ochiul liber, dar pot sa backfire, mai ales daca slice-ul ajunge la un backend developer care nu stie HTML

Daca faci testare des pe asta, cred ca e bine sa stai cateva ore sa iti faci un script de test pe care sa il rulezi de fiecare data. In plus, Casper iti permite sa inregistrezi diverse actiuni. Exista si tool-uri care iti permit sa generezi automat teste intr-un moment in care ce s-a codat e stabil ca sa te asiguri ca ramane stabil si dupa update-uri (de ex: resurrectio)

2 Likes