Share
Obținerea codului nostru revizuit de către un pro este o modalitate foarte bună de a îmbunătăți calitatea codului, dar ce se întâmplă dacă nu aveți acces la un programator rockstar? Faceți cel mai bun lucru și luați un "lint" pentru acea limbă.
Astăzi, aș vrea să vorbesc puțin despre CSSLint, un instrument de analiză a codului lansat recent, pe care l-ați ghicit, CSS. Alătură-mi-mă după salt!
Să lăsăm Wikipedia pentru o definiție:
Lint este un instrument care atrage atenția asupra utilizării suspecte în software-ul scris în orice limbaj de calculator.
Practic, o scame văd codul nostru și verifică practici de programare proaste. Variabile nedefinite, construcții ineficiente, lucruri de genul asta.
Probabil vă întrebați de ce ați avea nevoie vreodată de un astfel de instrument. Să ne confruntăm cu asta: nu toți avem cunoștință supremă cu privire la ceea ce lucrăm sau avem luxul de a face o analiză a codului nostru. În aceste cazuri, lipirea codului nostru într-o scame este următoarea opțiune. Și, spre deosebire de uneltele de curățat, scamele scuipă tidbits despre codul dvs. și cum să-l îmbunătățească.
Creat de Nicholas Zakas și Nicole Sullivan, CSSLint este un instrument open source care vă verifică sintaxa împotriva unui set de reguli predefinite pentru a elimina posibilele ineficiențe și pentru a vă asigura că prezentarea dvs. funcționează așa cum era de așteptat cu mici surprize.
După ce vă îndreptați spre site-ul CSSLint, puteți doar să inserați în CSS-ul sursă și să alegeți regulile pe care doriți să le aplicați. Apăsați butonul pentru scame și CSSLint va începe să vă erodeze blândețea.
Dacă ești un nod de nod ca mine, există și o versiune pentru asta. Doar introduceți sudo npm instalați -g csslint și ești bine să pleci!
Să aruncăm o privire rapidă asupra regulilor impuse de CSSLint.
Dacă ești ceva de genul meu, câteva reguli trebuie să fi fost înfrânte.
Foarte sincer, da, nu și tot între ele.
După ce l-am ascultat de mai multe table de discuții și de camerele IRC, am aflat că mulți dezvoltatori par a fi în derâdere asupra regulilor și poate chiar așa. Permiteți-mi să încerc să explic de ce majoritatea regulilor au sens, dar alții nu.
ID-urile nu ar trebui să fie folosite în selectori, deoarece aceste reguli sunt prea strâns legate de HTML și nu au nici o posibilitate de reutilizare. Este mult preferat să folosiți clasele în selectori și apoi să aplicați o clasă unui element din pagină.
Acesta a lovit un nerv cu mulți dezvoltatori, deoarece suntem obișnuiți să atribuim ID-uri pentru principalele componente structurale ale unui aspect precum antetul și subsolul.
CSSLint susține că stilul pentru astfel de elemente, prin definiție, nu poate fi reutilizat direct. Dacă doriți pagini laterale duble pe pagina dvs., o clasă vă permite să refolosiți styling-ul în timp ce un ID nu va.
Rețineți că doar pentru că o clasă poate fi refolosită nu înseamnă că trebuie să fie. Clasele unice sunt perfect acceptabile și o modalitate foarte bună de a reutiliza stilul dacă este nevoie.
Elementele de titlu (h1-h6) trebuie să fie definite ca stiluri de nivel superior și să nu fie definite în anumite zone ale paginii.
Majoritatea dezvoltatorilor, inclusiv mine, s-au obișnuit să scrie anteturi sensibile la context. Ca și în, definim stilul separat pentru anteturi în funcție de, de exemplu, care pagină este afișată. Un argument în favoarea acestei abordări constă în faptul că acesta mișcă totul de la markup la foaia de stil. Puteți defini doar o etichetă și permiteți cascadei CSS în consecință.
CSSLint susține că o astfel de abordare compromite previzibilitatea designului dvs. Dacă altcineva ar trebui să-ți ridice designul și să încerce să pună un loc undeva, ar trebui să fie conștient de contextul și amplasarea elementului. Cu titluri definite în mod necondiționat, el sau ea poate folosi o poziție oriunde încrezătoare în prezentarea sa, indiferent de părinții săi.
Elementele de titlu (h1-h6) ar trebui să aibă exact o regulă pe un sit.
O prelungire a regulii de mai sus pentru a îmbunătăți predictibilitatea prezentării. Corect sau rău, rețineți că în principiu aceasta exclude includerea unui fel de cod de resetare în foaia de stil. Fiecare foaie de resetare funcționează și pe rubricile dvs. și, prin urmare, CSSLint îl va marca ca o eroare.
Clasele adiacente arată ca.foo.bar. Deși sunt permise din punct de vedere tehnic în CSS, acestea nu sunt gestionate corect de Internet Explorer 6 și mai devreme.
Cu această regulă activată, regulile de semnalizare CSSLint cum ar fi .nav.red, cu motivul oficial fiind faptul că Internet Explorer 6 și de mai jos nu se joacă bine cu selectorul. Eu respect dezvoltatorii, dar trebuie sa nu fiu de acord aici. Doar pentru că nu funcționează Internetul "Dev-buster" Explorer 6 nu este un motiv mare pentru a nu mai lucra cu o caracteristică utilă.
Frontierele și umplutura adaugă spațiu în afara conținutului unui element. Stabilirea lățimii sau a înălțimii, împreună cu marginile și garniturile, este de obicei o greșeală deoarece nu veți obține rezultatul vizual pe care îl căutați. CSS Lint avertizează atunci când o regulă utilizează lățime sau înălțime în plus față de padding și / sau border.
Modelul cutiei poate fi rupt, dar aproape fiecare dezvoltator din partea frontului știu că este foarte conștient de neajunsurile și cum să depășească diferențele cu implementarea. Suntem într-adevăr pregătiți să renunțăm la un nivel de control deoarece unele browsere mai vechi au o implementare diferită?
Folosirea fonturilor web vine cu implicații de performanță, deoarece fișierele de fonturi pot fi destul de mari și unele browsere blochează redarea în timp ce le descarcă. Din acest motiv, CSS Lint vă va avertiza atunci când există mai mult de cinci fonturi web într-o foaie de stil.
Nu prevăd o situație în care să folosesc mai mult de cinci fonturi într-o pagină, dar simt că scufundarea pe acest teritoriu este puțin discutabilă. În caz contrar, acesta este un defect de proiectare decât un defect de dezvoltare. Dacă un dezvoltator face referire la cinci fonturi separate în foaia de stil, există șanse, nu este întâmplător.
CSS Lint verifică pur și simplu pentru a vedea dacă ați utilizat plutitorul de mai mult de 10 ori și, dacă da, afișează un avertisment. Folosind aceste plutitoare multe înseamnă de obicei că aveți nevoie de un fel de abstracție pentru a obține aspectul.
În timp ce eu concord cu argumentul creatorilor că a avea mai mult de zece cazuri de float este o idee proastă, de asemenea, simt că acest lucru va afecta marcarea după o anumită dimensiune.
De exemplu, într-o situație în care doriți să plutiți două elemente, utilizați în mod tradițional:
? și stilul, prin metode tradiționale.
.container-1 lățime: 70%; plutește la stânga; .container-2 latime: 30%; plutește la stânga;
Metoda CSSLint ar fi abstractizarea flotorului ca atare:
? și stilul:
.container-1 lățime: 70%; .container-2 latime: 30%; float float: left;
Deși sunt de acord că aceasta este o abordare viabilă, consider că marcarea va deveni mult mai aglomerată odată ce încercați să abateți mai mult. Mai degrabă aș vedea o clasă care conține cea mai mare parte a stilului său într-un singur loc decât aglomerarea marcajului cu 10 clase. Din nou, simt că acesta este un subiect subiectiv.
Toate regulile de mai sus respectă practicile standard actuale. Sigur, unele reguli au o importanță mică în lumea reală, cum ar fi valori zero care nu necesită unități sau vor fi prinse de un IDE decent, cum ar fi erorile de parsing, dar totuși acestea sunt reguli bune pe care le aveți într-o suită de testare CSS.
CSSLint va ajuta mulți dezvoltatori pe drum, dar?
CSSLint este, fără îndoială, scris de dezvoltatori cu acreditări excelente și cu siguranță va ajuta o mulțime de dezvoltatori și designeri pe drum.
Ceea ce mi se pare un pic irksome este că o mulțime de reguli controversate provin de la Object Oriented CSS, un cadru CSS destinat să permită dezvoltatorilor să creeze CSS întreținut. Deși nu am nimic împotriva cadrului și a paradigmei sale, trebuie să fiți de acord că este o modalitate de a face lucrurile, nu mod de a face lucrurile.
Spre deosebire de JSLint unde simt că toate regulile au sens, cu CSSLint, mi se pare că mi se spune că un stil de scriere a CSS este corect, iar ceilalți sunt în neregulă. Ar fi ca cineva să mă ceară să renunț la Beatles, deoarece Rolling Stones este trupa preferată.
Instrumentele sunt doar acelea - instrumente.
Desigur, noi, ca grup, tindem să fim destul de lipicioși când vine vorba de codul nostru. Nu ne place să auzim că codul nostru ar putea avea probleme potențiale * sau ar putea fi scrise într-un mod complet diferit.
Principalul lucru pe care trebuie să-l notezi este că CSSLint este, în cele din urmă, un instrument. Vă informează pur și simplu că unele zone Mai au erori.
CSSLint nu trebuie să fie pumnul de fier în jurul căruia să vă bazați întregul ego. Nu există niciun motiv să vă îndoiți înapoi pentru a evita un avertisment dacă știți exact ce faceți.
da.
În CSS, ca și în calculul integrat, există multe soluții la o anumită problemă. Nu este neapărat o modalitate "cea mai bună" de a face lucruri - puteți favoriza lizibilitatea în timp ce eu pot favoriza eficiența. Ceea ce este important este că îți dai seama că fiecare dintre noi are un mod unic de a face lucrurile.
Dacă nu aveți aceleași perspective în ceea ce privește rezolvarea unei probleme, puteți să fiți în dezacord cu o altă abordare și poate chiar să aveți dubii.
Acestea fiind spuse, nu există niciodată un motiv bun pentru a nu învăța lucruri noi. Privind problemele din perspectiva unui alt dezvoltator este o modalitate foarte bună de a vedea dacă puteți învăța ceva nou.
Ce crezi despre CSSLint? Găsește util? Derutant? A ajutat cu problemele voastre reale? Spuneți-ne în comentariile.
Fiți excelenți unul altuia și vă mulțumesc foarte mult pentru citire!
Accentsconagua