4 Verktyg att granska och optimera CSS

När din webbplats börjar växa, så kommer din kod. När din kod expanderar kan CSS plötsligt bli svårt att underhålla, och du kan sluta skriva över en CSS-regel med en annan. Detta komplicerar saker och du kommer antagligen att sluta med massor av buggar.

Om detta händer med dig är det dags för dig att granska webbplatsens CSS. Genom att granska din CSS kan du identifiera delar av din CSS som inte är optimerade. Du kan också minska formatarkets filstorlek genom att eliminera kodenheter som saktar ner din webbplatss prestanda.

Här är 5 bra verktyg för att hjälpa dig att granska och optimera CSS.

Typ-o-matic

Typ-o-matic är ett Firebug-plugin för att analysera typsnitt som används på en webbplats. Denna plugin ger en visuell rapport i en tabell, med teckenfönsteregenskaper som typfamiljen, storleken, vikten, färgen och antalet gånger typsnittet används på webbsidan. Genom rapporttabellen kan du enkelt optimera typsnittet, ta bort vad som är onödigt eller kombinera stilar som är alltför lika.

CSS Lint

CSS Lint är en luddning verktyg som analyserar CSS-syntaxen baserat på specifika parametrar som adresserar prestanda, tillgänglighet och kompatibilitet hos din CSS. Du skulle bli förvånad över resultaten, förvänta dig många varningar i din CSS. Dessa fel kommer dock att hjälpa dig att fixa CSS-syntaxen och göra den effektivare. Dessutom kommer du också att vara en bättre CSS-skribent.

CSS ColorGuard

CSS ColorGuard är ett relativt nytt verktyg. Det är byggt som en nodmodul och körs över alla plattformar: Windows, OS X och Linux. CSS ColorGuard är ett kommandoradsverktyg som meddelar dig om du använder liknande färger i ditt stylesheet; t.ex. # f3f3f3 är ganska nära # f4f4f4, så du kanske vill överväga att slå samman de två. CSS ColorGuard kan konfigureras, du kan ställa in likhetsgränsen och ställa in de färger du vill att verktyget ska ignorera.

CSS Dig

CSS Dig är ett Python-skript och fungerar lokalt på din dator. CSS Dig kommer att göra en grundlig granskning i din CSS. Den kommer att läsa och kombinera egenskaper t.ex. Alla bakgrundsdeklarationer kommer att gå under bakgrundsdelen. På så sätt kan du enkelt fatta beslut baserat på rapporten när du försöker standardisera din CSS-syntax, t.ex. Du kan hitta färg över stilar med följande färgdeklaration.

 färg: #ccc; färg: #cccccc; färg: #CCC; färg: #CCCCCC; 

Dessa färgdeklarationer gör samma sak. Du kan lika bra gå med #ccc eller med huvudstaden #CCC som standard. CSS Dig kan avslöja denna redundans för andra CSS egenskaper, och du kommer att kunna göra din kod mer konsekvent.