4 Instrumente pentru audit și optimizare CSS

Odată ce site-ul dvs. începe să crească, codul dvs. va fi același. Pe măsură ce codul dvs. se extinde, CSS poate deveni dintr-o dată greu de întreținut și este posibil să se termine suprascrierea unei reguli CSS cu alta. Acest lucru complică lucrurile și, probabil, veți ajunge cu o mulțime de bug-uri.

Dacă vi se întâmplă acest lucru, este timpul să faceți asta verificați CSS-ul site-ului dvs.. Auditul CSS vă va permite să identificați porțiuni ale CSS care nu sunt optimizate. De asemenea, puteți reduce dimensiunea fișierului de stil prin eliminarea liniilor de cod care încetinesc performanța site-ului dvs..

Iată 5 instrumente bune care vă ajută să vă controlați și să optimizați CSS.

Tip-o-matic

Tip-o-matic este un plugin Firebug pentru a analiza fonturile care sunt utilizate într-un site web. Acest plugin oferă un raport vizual într-un tabel, care poartă proprietăți ale fontului, cum ar fi familia de fonturi, mărimea, greutatea, culoarea și, de asemenea, de câte ori este utilizat fontul în pagina web. Prin tabelul de rapoarte, puteți să optimizați cu ușurință utilizarea fontului, să eliminați ceea ce nu este necesar sau să combinați stiluri prea asemănătoare.

CSS Lint

CSS Lint este a scămoșare care analizează sintaxa CSS bazată pe parametrii specifici care abordează performanța, accesibilitatea și compatibilitatea CSS. V-ați fi surprins de rezultate, așteptați multe avertismente în CSS. Cu toate acestea, aceste erori vă vor ajuta să remediați sintaxa CSS și să o eficientizezi. În plus, veți fi și un scriitor CSS mai bun.

CSS ColorGuard

CSS ColorGuard este un instrument relativ nou. Este construit ca un modul Node și rulează pe toate platformele: Windows, OS X și Linux. CSS ColorGuard este un instrument de linie de comandă care vă va anunța dacă utilizați culori similare în foaia de stil; de exemplu. # f3f3f3 este destul de aproape de # f4f4f4, așa că ar fi bine să vă gândiți să le îmbinați pe cele două. CSS ColorGuard este configurabil, puteți seta pragul de similaritate și setați culorile pe care doriți să le ignorați.

CSS Dig

CSS Dig este un script Python și funcționează local pe computer. CSS Dig va efectua o examinare detaliată în CSS. Acesta va citi și combina proprietățile, de ex. toate declarațiile de culoare de fundal vor merge sub secțiunea de fundal. Astfel, puteți lua cu ușurință decizii bazate pe raport atunci când încercați să vă standardizați sintaxa CSS, de ex. puteți găsi culori în toate stilurile cu următoarea declarație de culoare.

 culoare: #ccc; culoare: #cccccc; culoare: #CCC; culoare: # CCCCCC; 

Aceste declarații de culoare fac același lucru. S-ar putea să mergeți și cu #ccc sau cu capitalul #CCC ca standard. CSS Dig poate expune această redundanță și pentru alte proprietăți CSS și veți putea face codul să fie mai consistent.