Cadrele CSS sunt un mod frumos de a începe cu un proiect. Puteți spune după numele multor cadre populare: Bootstrap, Foundation și Skeleton doar pentru a numi câteva. Toate aceste nume evocă un punct de plecare - problema este că, dacă nu vă luați timp pentru a elimina piesele pe care nu le-ați folosit, veți expedia codul umflat utilizatorilor dvs.

pentru

Începeți cu tot, expediați ceea ce aveți nevoie

Când începeți un proiect, este util să aveți la dispoziție o gamă largă de instrumente. Indiferent de alegerea dvs., este destul de sigur că vor exista mai multe instrumente principale: un mecanism de aspect, utilitare pentru a forma formulare, butoane și alte CTA-uri, bare laterale și așa mai departe. Dacă le aveți la îndemână, dezvoltarea devine în mișcare și vă permite să vă concentrați asupra specificului proiectului dumneavoastră.

Cu toate acestea, odată ce a sosit momentul expedierii, lăsarea întregului cadru în loc înseamnă că livrați balonare inutilă fiecărui utilizator. Poate că ați folosit trei dintre cele șase butoane pe care le oferă sau ați decis să implementați propriul sistem de rețea la mijlocul proiectului. Îndepărtarea manuală a acestora este plictisitoare și puțin precară, deoarece este posibil să eliminați accidental ceva care este utilizat.

UnCSS pentru salvare

O modalitate obișnuită de a evita această problemă este de a utiliza UnCSS, un instrument care vă va compara HTML și CSS, eliminând biții de CSS pe care îi consideră neutilizați. Folosește PhantomJS sub capotă pentru a reda un set de pagini, inclusiv JavaScript. Odată ce pagina este redată în memorie, compară toți selectorii din pagina redată cu fișierele sursă CSS. De acolo poate genera un nou fișier CSS care conține selectoarele pe care le-ați folosit efectiv și nimic altceva!

Automatizarea UnCSS

UnCSS este o aplicație rapidă de utilizat. Îi oferiți o listă de fișiere CSS și o listă de adrese URL pe care ar trebui să le redea și face restul. Exemplul de sarcină gulp-uncss din kitul nostru de antrenament de performanță frontend reduce semnificativ o copie a Bootstrap. O puteți vedea în contextul unui Gulpfile mai mare pe GitHub, dar iată sarcina în sine:

Pașii din sarcină sunt:

  1. Specificați activele Bootstrap originale (le-am inclus folosind npm, astfel încât acestea să fie în directorul node_modules.)
  2. Specificați câteva adrese URL care ar trebui utilizate ca referințe HTML. Puteți specifica fișiere HTML simple, dar în cazul nostru este utilizat site-ul Jekyll care rulează local.
  3. Destinația noastră finală este css/la baza proiectului nostru. Conținutul acestui director este ignorat de git, deoarece tot ce este în interior este generat de Gulp.

Chiar dacă utilizați copiile reduse ca punct de plecare, economiile sunt destul de extraordinare:

Fișier UnCSS original
bootstrap.min.css 115K 12K
bootstrap-theme.min.css 19K 7,3K

Deci, fișierele CSS au trecut de la 134K la aproximativ 19K fără nici o ridicare grea din partea noastră! Bate palma!

Notă: eșantionul nostru de sarcină exclude în mod intenționat unele pagini necesare din sarcina UnCSS. Deoarece este conceput pentru a fi utilizat într-un antrenament practic, lecția de aici este că excluderea paginilor care utilizează biți unici ai cadrului înseamnă că rezultatele dvs. UnCSS vor fi incomplete. O recomandare pentru a evita această problemă este să utilizați o pagină de ghid de stil ca adresă URL, sau altă referință HTML despre care se știe că conține o copie completă a tuturor marcajelor posibile de pe site-ul dvs.

Verificați întotdeauna rezultatele

Un comentator a subliniat că UnCSS poate elimina stilurile care apar doar după interacțiunea utilizatorului. Câteva exemple sunt: ​​hover,: focus și clase care sunt adăugate la DOM de către JS.

UnCSS este echipat cu o opțiune de ignorare care vă permite să specificați ce selectoare ar trebui nu a fi eliminat.

Când am testat din nou codul exact din trusa noastră de antrenament, am văzut că toate clasele: hover au rămas în mod implicit în fișierele UnCSS, fără a fi necesară nicio configurație suplimentară. Cu toate acestea, dacă vă bazați pe JavaScript pentru a adăuga sau a elimina clasele utilizate de CSS, țineți minte această opțiune.