4 Nástroje na audit a optimalizáciu CSS

Akonáhle vaše webové stránky začnú rásť, tak aj váš kód. Ako sa váš kód rozširuje, CSS sa môže zrazu ťažko udržiavať a môžete skončiť prepísaním jedného pravidla CSS s iným. To komplikuje veci a pravdepodobne skončíte s množstvom chýb.

Ak sa to deje s vami, je čas na vás audit CSS stránky. Audit vášho CSS vám umožní identifikovať časti vášho CSS, ktoré nie sú optimalizované. Môžete tiež znížiť veľkosť šablón štýlov odstránením riadkov kódu, ktoré spomaľujú výkonnosť vašich stránok.

Tu je 5 dobrých nástrojov, ktoré vám pomôžu pri audite a optimalizácii CSS.

Type-o-matic

Type-o-matic je plugin Firebug na analýzu písiem, ktoré sa používajú na webových stránkach. Tento plugin poskytuje vizuálnu správu v tabuľke s vlastnosťami písma, ako je rodina písma, veľkosť, hmotnosť, farba a tiež počet použitých písiem na webovej stránke. Prostredníctvom tabuľky prehľadov môžete ľahko optimalizovať použitie písma, odstrániť to, čo je zbytočné, alebo kombinovať štýly, ktoré sú príliš podobné.

CSS Lint

CSS Lint je a nepĺzne nástroj, ktorý analyzuje syntax CSS na základe špecifických parametrov, ktoré sa týkajú výkonu, prístupnosti a kompatibility vášho CSS. Boli by ste prekvapení výsledkami, očakávajte veľa varovaní vo vašom CSS. Tieto chyby vám nakoniec pomôžu opraviť syntax CSS a zefektívniť ju. Navyše budete aj lepším spisovateľom CSS.

CSS ColorGuard

CSS ColorGuard je relatívne nový nástroj. Je postavený ako modul uzla a prechádza cez všetky platformy: Windows, OS X a Linux. CSS ColorGuard je nástroj príkazového riadku, ktorý vás upozorní, ak používate podobné farby v štýle šablón; napr. # f3f3f3 je dosť blízko # f4f4f4, takže môžete zvážiť zlúčenie týchto dvoch. CSS ColorGuard je konfigurovateľný, môžete nastaviť prah podobnosti, ako aj nastaviť farby, ktoré chcete nástroj ignorovať.

CSS Dig

CSS Dig je skript Python a funguje lokálne na vašom počítači. CSS Dig vykoná dôkladnú kontrolu vo vašom CSS. Číta a spojí vlastnosti, napr. všetky deklarácie farieb pozadia sa dostanú pod sekciu pozadia. Týmto spôsobom môžete jednoducho prijímať rozhodnutia založené na správe pri pokuse o štandardizáciu syntaxe CSS, napr. môžete nájsť farbu medzi rôznymi štýlmi s nasledujúcou deklaráciou farieb.

 farba: #ccc; farba: #cccccc; farba: #CCC; farba: #CCCCCC; 

Tieto farebné vyhlásenia robia to isté. Môžete tiež ísť s #ccc alebo s kapitálom #CCC ako štandard. Služba CSS Dig môže túto redundanciu vystaviť aj pre ostatné vlastnosti služby CSS a budete môcť urobiť váš kód viac konzistentný.