10 cele mai bune instrumente pentru formatarea și optimizarea fișierelor CSS

Formatarea și optimizarea fișierelor CSS nu mai reprezintă o durere de cap pentru dezvoltatorii web cu ajutorul acestor instrumente culese manual!


Încă de la înființare, foile de stil în cascadă (CSS) au fost utilizate pe scară largă pentru a contura imaginile paginilor web. Acestea includ definiția culorilor, machete, animație și fonturi. Fiind independent de HTML, CSS vă permite să adaptați cu ușurință o prezentare a paginii web la diferite tipuri de dispozitive cu dimensiuni de ecran diferite, fără a fi necesar să schimbați un pic din conținutul paginii..

CSS se numește cascada foaie de stil din cauza modului în care valorile proprietății sunt aplicate ierarhiei de conținut. Elementele copil pot moșteni sau înlocui valorile proprietății de la elementele părinte. Aceste capacități sunt furnizate printr-un model bazat pe un domeniu de efect ierarhic. Problema acestui model este că, dacă nu este utilizat corect, poate afecta serios performanța unui site web.

Și nimănui nu-i place un site web lent. De aceea au apărut necesitățile pentru optimizarea CSS, împreună cu o nouă varietate de instrumente concepute în mod explicit pentru a face fișierele CSS cât mai îngrijite și rapide..

Optimizarea CSS se poate face în mai multe moduri: fișierele CSS pot fi reduse ca mărime, pot fi curățate, pot fi testate sau validate pentru corectitudine, pot fi redactate, pot fi formatate pentru a înțelege codul său și, în general, mai bine, pot fi reglat pentru a permite o experiență mai bună a utilizatorului. Am făcut o selecție a celor mai bune instrumente pentru fiecare dintre aceste sarcini.

# Instrumente de ajustare CSS

CSS Minify

CSS Minify este un instrument simplu pentru a face minarea CSS: procesul de luare a CSS înfrumusețat, lizibil, bine format și de a elimina toate spațiul, indentarea, liniile noi și comentariile. CSS minificat rezultat poate fi utilizat cu succes fără aceste elemente. De asemenea, micșorarea face mai ușor de citit CSS, descurajând hoții de coduri de a-ți fura foile de stil muncite.

Când vă micșorați codul, este recomandat să păstrați o versiune înfrumusețată (care nu este minificată), deoarece va trebui să o puteți citi în viitor, în cazul în care va trebui să faceți modificări.

Strat de acoperire

Strat de acoperire nu este un instrument de optimizare a CSS. În schimb, este o bibliotecă CSS open-source concepută cu viteză în minte. Este un descendent al limbajului de design Adobe dezvoltat pentru paranteze, Edge Reflow.

Topcoat include PSD și multe alte artefacte de design, împreună cu o colecție de icoane SVG simple și curate și ghiduri de stil. Oferă, de asemenea, instrumente de evaluare și evaluarea familiei de fonturi Adobe Source Sans Pro.

Cod de înfrumusețare

Cod de înfrumusețare se bazează pe CSS Tidy, popularul analizor și optimizator CSS open-source. Vă permite să lipiți codul CSS pentru a fi procesat pe o zonă de text sau să-l obțineți de la o adresă URL. După ce și-a făcut treaba, afișează codul optimizat, împreună cu o listă a modificărilor făcute. Puteți copia codul modificat în clipboard sau îl puteți salva într-un fișier pentru utilizare ulterioară.

Instrumentul oferă o listă semnificativă și cuprinzătoare de opțiuni care vă permite să ajustați rezultatele acestuia pentru a satisface preferințele dvs. De exemplu, oferă cinci opțiuni de compresie, de la compresie scăzută la cea mai mare compresie. Alte opțiuni vă permit să specificați sortarea, alte forme de compresie, eliminarea articolelor inutile, între altele.

CSS Nano

Un alt instrument de minifiere CSS este CSS Nano. Acesta se bazează pe un instrument creat pentru transformarea stilurilor cu JavaScript, numit PostCSS. Datorită arhitecturii pluginului acestui instrument, creatorii CSS Nano au putut să-l construiască din module mici, cu funcții restrânse.

În mod implicit, CSS Nano va prelua fișierul CSS pe care îl dați pentru procesare și va face doar optimizări sigure pe acesta. Dar instrumentul oferă și opțiuni pentru a împinge compresia până la limite. Funcționările CSS vor fi în continuare aceleași, dar spațiul său alb inutil va fi eliminat. De asemenea, identificatorii săi se vor comprima, iar definițiile sale inutile vor fi complet curățate.

# Instrumente de curățare CSS

Markup murdar

Markup murdar face exact opusul minifiers: ia orice cod pe care îl alimentezi și îl curăță, făcându-l ușor de citit – atâta timp cât este cod CSS valabil. Codul rezultat este perfect înfrumusețat.

Creatorii Dirty Markup spun că aproape un miliard de linii de cod (având în vedere nu numai CSS, ci și HTML și JavaScript) au fost înfrumusețate folosind instrumentul lor.

Selectori de praf

Selectori de praf a fost creat pentru a scana un site web și a găsi selectori CSS neutilizați pentru a le elimina și reduce dimensiunea codului dvs. Funcționează ca un add-on pentru Firefox și Opera.

Selectorii Dust-Me pot lucra pe o pagină individuală sau pot trage o întreagă sitemap, arătându-vă detaliile tuturor foilor de stil și selectoarelor găsite, organizându-le în mod uzat și neutilizat. Versiunea Firefox este capabilă să scaneze automat paginile în timp ce navigați. Trebuie să țineți cont doar că, atunci când faceți acest lucru, evenimentele de mutație pot declanșa scanări suplimentare dacă pagina se schimbă.

CSS Lint

CSS Lint oferă o interfață minimalistă: doar o casetă text mare în care lipiți codul CSS pentru a-l „licheta”. Nu spune ce va face procesul de vopsire la codul dvs., dar un mesaj de avertizare din partea de sus a paginii vă spune că rezultatele vă vor răni sentimentele – și vă vor ajuta, de asemenea, să vă codați mai bine.

CSS Lint validează sintaxa codului dvs. pe baza unui set de reguli predefinite. Procedând astfel, detectează potențiale ineficiențe și erori. Cu un pic de personalizare, CSS Lint vă oferă posibilitatea de a selecta setul de reguli pe care doriți să le aplicați.

# Instrumente de testare / validare CSS

Test de stres CSS

Test de stres CSS funcționează ca un marcaj (o bucată mică de cod JavaScript) care aplică testarea stresului în CSS a oricărei pagini web. Instrumentul indexează toate elementele din codul CSS și clasele acestora. Apoi începe testul de stres eliminând clasele una câte una și cronometrează cât timp durează pentru a parcurge pagina.

Dacă timpul pe care pagina este necesară pentru a derula se reduce considerabil la scoaterea unui selector, atunci acel selector reprezintă o zonă problematică care trebuie eliminată sau corectată. Acest instrument funcționează în special cu codul CSS3 fantezist, care permite colțurile rotunjite, opacitatea, umbrele de text și umbrele cutiei. Toate aceste efecte pot fi realizate în CSS3 fără a utiliza secțiuni de imagini, scripturi speciale sau adăugarea de elemente suplimentare.

Însă CSS3 ar putea cauza probleme: o singură proprietate ar putea duce la redescoperiri vizibile și probleme de derulare a paginii. Acolo poate fi util testul de stres CSS.

Serviciul de validare CSS

Serviciul de validare CSS validează foile de stil în cascadă și (X) HTML cu foile de stil. Instrumentul verifică proprietățile definite în toate versiunile CSS. Pentru a valida o pagină sau un fișier CSS, trebuie doar să introduceți URI-ul său (identificator de resursă uniform) și să setați câteva opțiuni de bază, cum ar fi profilul (tipul CSS de verificat), dispozitivul țintă, avertismentele de afișat și ce să faceți cu extensiile furnizorului probleme legate (afișează erori sau avertismente).

După ce ați setat totul, apăsați butonul Verificați și așteptați rezultatele. Raportul final vă va arăta o listă cuprinzătoare de erori și avertismente, în care veți găsi proprietăți nevalide, erori de sintaxă, extensii de furnizori necunoscute, între multe alte probleme pe care ar trebui să le corectați în CSS pentru a-l regla. Raportul vă va arăta, de asemenea, tot codul CSS valid din pagina dvs..

BackstopJS 3

BackstopJS 3 automatizeaza testarea regresiei vizuale a interfetelor utilizatorilor web responsive. Își face treaba comparând o serie de capturi de ecran DOM. Oferă o listă interesantă de funcții: există raportări în browser, setări pentru imprimare și ecran și alte funcții specifice, cum ar fi filtrarea afișajului și referitor / test / inspector dif diferit vizual.

Folosind scripturile Puppeteer și ChromyJS, BackstopJS 3 poate simula interacțiunile utilizatorilor și este capabil să redea testele cu Chrome Headless. Pentru a elimina problemele de redare multiplă platformă, acesta are, de asemenea, redare integrată a docker-ului. Instrumentul poate rula la nivel global sau local sub forma unui pachet autonom și joacă frumos cu CI și control sursă. BackstopJS 3 este foarte ușor de utilizat: cu doar trei comenzi, puteți parcurge un drum destul de lung.

Concluzie

Sper că instrumentele CSS de mai sus vă ajută să optimizați fișierele CSS ale aplicației dvs. web pentru o performanță mai bună. Dacă sunteți interesat să aflați CSS avansat, verificați acest lucru curs strălucitor.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map