Linting fișiere de stil. Atât de puțini oameni o fac. Cu toate acestea, mai mulți oameni trebuie să verifice fișierele de stil, în special în echipe eterogene, unde mulți oameni codifică codul.
În acest articol, voi vorbi de ce trebuie să conectăm fișierele noastre de stiluri și cum să conectăm fișierele de foi de stil în procesul de asamblare, atât pentru CSS pur, cât și pentru Sass.
intrare
Ce este lingerea?
De ce trebuie să marchalizăm CSS-ul nostru?
Există multe motive pentru a conecta fișierele de stiluri. Linting menține uniformitatea codului, prezintă erori în baza de cod, ajută la eliminarea codului inutil și, de asemenea, ajută la evitarea pericolelor datorate lenei programatorilor.
Să ne uităm la câteva exemple.
Linteriile sunt foarte bune pentru capturarea erorilor stilistice, pe care le-ați văzut în codul de mai sus. Deși regulile stilistice nu sunt cele mai importante în linter, ele ajută la păstrarea uniformei de cod. În plus, nu știu despre dvs., dar cele două erori afișate mai sus sunt punctul meu slab.
Sunt la fel de buni la prinderea unor greșeli tipărite (greșelile), ca în exemplul cu culoarea greșită. Erori de acest tip pot sparge aspectul paginii dacă nu sunt prinse.
Astăzi, majoritatea proprietăților CSS3 nu mai au nevoie de prefixe. Linting vă permite să găsiți prefixe inutile și să curățați codul depășit. Prefixele de lăcuire sunt deosebit de utile atunci când sunt asociate cu Autoprefixer - vă va permite să eliminați toate prefixele din codul sursă și să adăugați cele necesare, în funcție de setările Autoprefixer, luând în considerare audiența dvs.
Proprietățile repetate ascund deseori erori grave. Ce se întâmplă dacă dezvoltatorul dorea o tranziție atât pentru proprietățile de opacitate, cât și pentru culoarea de fundal. În acest caz, efectul de tranziție pentru opacitate va fi pierdut. Linging va arăta această eroare.
Este suficient de convingător? Dacă nu, continuați să citiți.
Prezentarea Stillint
Stylelint este un puternic și modern liner CSS care vă va ajuta să impuneți uniformitatea stilului de cod și să evitați erorile din foile dvs. de stil.
Linter se bazează pe PostCSS. astfel încât el înțelege orice sintaxă care poate analiza PostCSS, inclusiv SCSS (și mai puțin).
PostCSS este un instrument de conversie a stilurilor utilizând plug-in-uri pe JS. Aceste pluginuri vă pot verifica CSS-ul, puteți adăuga variabile și impurități în limbaj, polonez schițele specificației CSS, încorporați imagini prin intermediul base64.
PostCSS și Stylelint sunt ceea ce vom folosi pentru a conecta stilurile noastre în secțiunea următoare.
Fișierele de configurare Stylelint
Frumusețea Stillint este că nu vă impune un stil. Creați seturile de reguli de la zero, astfel încât să poată fi la fel de arogante și încăpățânate pe cât doriți. Nu trebuie să vă petreceți timp pentru a dezactiva regulile inutile pentru a începe.
Documentația Regulilor stilului este un bun punct de plecare. De asemenea, puteți utiliza setările standard Stylelint. care sunt bine gândite suficient pentru a le folosi pentru proiectele dvs.
Vom începe cu un mic fișier pentru a acoperi cele mai importante. Personal, cred că având un fișier curat este mai bun decât suprascrierea fișierului de setări standard din comanda Stylelint - este mai bine să adăugați ceea ce aveți nevoie, să nu dezactivați unul suplimentar.
Se pare ca aceasta:
Vă recomandăm să studiați cu atenție descrierea regulilor Stylelint și să o modificați, creând configurația ideală pentru linter. Acum, să ne configurați ansamblul folosind aceste reguli.
Cum să vă lipiți CSS-ul
Hai să începem cu cedarea CSS pură. Veți fi surprins de cât de ușor este de a configura! Instrumentele de care aveți nevoie pentru a instala: gulp-postcss. postcss-reporter. și stillint. Să o facem.
Și iată dosarul pentru Gulp de a pune totul împreună:
A fost dificil? Am scris 50 de linii de cod, inclusiv introducerea linterului și a importurilor. Apropo, asigurați-vă că ați modificat calea sursă în funcție de proiectul dvs.!
Și mai abrupt este că trebuie să schimbați doar o linie pentru a activa suportul SCSS. Să o facem acum ...
Cum să vă lăsați sasul
Lusting fișierele SCSS este foarte simplu cu PostCSS. Singura diferență dintre lustruirea CSS și SCSS este că trebuie să îi înveți pe PostCSS să înțeleagă sintaxa .scss. și este la fel de ușor ca instalarea postcss-șss și schimbarea unei linii în sarcina de mai sus.
Aici este fișierul complet pentru Gulp pentru a lăsa fișierele SCSS:
Atât de ușor! Și asta este! Acum puteți sclipi atât fișierele CSS cât și cele SCSS.
Extindeți pluginurile Stylelint
La fel ca PostCSS, Stylelint se extinde cu plugin-uri, ceea ce este cu adevărat uimitor!
Să aruncăm o privire asupra unui mic exemplu în care lingerea va ajuta la îmbunătățirea lizibilității codului și, de asemenea, va ajuta la lansarea dezvoltatorilor leneși atunci când încearcă să ignore cu ușurință standardele acceptate pentru codul dvs. CSS în proiect.
Un exemplu real: lingerea în practică
Manager de proiect care iubește codul
Ce zici de acest scenariu? Managerul de proiect gestionează dezvoltarea unei noi aplicații web și, pentru a nu distrage dezvoltatorii, decide să corecteze codul însuși. El decide să adauge o umbră la componenta de box pe: hover. și, de asemenea, adăugați starea la: hover pentru link-uri către nodul copil al componentei.
Ce ar putea fi mai rău?
Iată codul pe care managerul îl adaugă la proiect:
Selectorul de selecție în Sass este rău! Folosim linterul!
Selectorul de selecție este un rău necesar atunci când se dezvoltă folosind Sass; acest lucru este cu adevărat util atunci când este folosit corect, dar aceasta este o modalitate de a călători în specificitatea iadului. dacă este abuzată. Cuiburile, de regulă, sunt o consecință a leneșului dezvoltatorului și, ca rezultat, obținem un cod greu de citit și scris greșit. Prima regulă : hover poate fi de 10 linii sub definiția componentei părinte, ca urmare, este greu de înțeles la ce se referă. Cu toate acestea, mai important, cuiburile nu sunt deloc necesare.
Aici este CSS la care se va compila regula de mai sus:
Dacă aș lucra într-o echipă și cineva ar oferi un astfel de cod, atunci ar avea o conversație foarte serioasă cu mine.
Următorul dezvoltator care vine și vrea să suprascrie această regulă de cascadă va avea probleme. Știind acest lucru, vă sfătuiesc să vă abțineți de la utilizarea cuiburilor cu orice preț, cel puțin dacă nu știți ce faceți.
Din fericire, există un plug-in pentru acest lucru! Folosind Stylelint, putem instala pluginul stillint-statement-max-depth-nesting. și setați nivelul maxim de cuibărit pentru a evita cuiburile inutile.
Și trebuie doar să adăugați următorul cod în scins-scula în fișierul nostru Gulp:
Pentru echipe care știu ce fac, aș stabili o limită maximă de cuibare egală cu trei. (Setați-o mai jos pentru echipe fără experiență)
Cu o limită maximă de cuibărit de trei, Stillint va obliga managerul de proiect să fixeze codul mai sus. Managerul de proiect va merge, va gândi și va reveni cu acest cod:
Versiunea corectată a codului este mai ușor de citit, dar încă nu se potrivește. Există încă o cusătură inutilă de selectori! Linter știe acest lucru și forțează managerul de proiect să-și regândească implementarea, astfel încât ansamblul să treacă.
Acum, am ajuns deja la ceva! Acum va fi acceptată de linter, iar adunarea va trece. Codul de mai sus nu este rău, dar poate fi întotdeauna mai bun! Dacă vrei să fii cu adevărat aspru. puteți dezactiva în totalitate cuibăritul, lăsând numai regulile @ (de exemplu, pentru @ media - nota unui interpret). Acest lucru va obliga membrii echipei, inclusiv managerii de proiect, să se gândească serios la ceea ce scriu.
Excelent! Fără stiluri de coasere în ansamblu, care făceau refactorul de cod - această leneșă periculoasă nu ar fi fost prinsă și calitatea codului s-ar degrada treptat.
Sper că acum v-am convins că stilurile de lingtare sunt o investiție avantajoasă. Linting este prietenul tău. Investiția este ieftină, dar protejează echipa de datoria tehnică sub forma unui cod prost scris.
Într-un mod bun, prietenul meu este un dezvoltator și designer!
postfață
Instalați ansamblul Sass în gulp cu un singur clic
Doriți să utilizați puterea Sass lasing, împreună cu procesul general de gasso gasso Sass gratuit, doar instalând un pachet mic prin npm?
Cred că da. Am un proiect software numit Slushie. puteți citi despre acest lucru în blogul meu.
Scotty Vernon (Scotty Vernon) este un creator și director al studiourilor Wildflame. A lucrat cu proiecte precum BBC Sport, BBC RD și altele. El este mereu aproape de twitter, iubește berea germană, joacă și uneori scrie în a treia persoană.
Înregistrări similare:
Trimiteți-le prietenilor: