4 Nástroje pro audit a optimalizaci CSS

Jakmile vaše webové stránky začnou růst, tak bude váš kód. Jak se váš kód rozšiřuje, CSS se může náhle těžko udržovat a můžete skončit přepsáním jednoho pravidla CSS jiným. To komplikuje věci a budete pravděpodobně skončit s množstvím chyb.

Pokud se vám to děje, je čas, abyste to udělali auditovat CSS vašeho webu. Auditování CSS vám umožní identifikovat části vašeho CSS, které nejsou optimalizovány. Můžete také zmenšit velikost souboru stylů tím, že odstraníte řádky kódu, které zpomalují výkon vašeho webu.

Zde je 5 dobrých nástrojů, které vám pomohou auditovat a optimalizovat CSS.

Typ-o-matic

Typ-o-matic je plugin Firebug pro analýzu písem, které se používají na webových stránkách. Tento plugin poskytuje vizuální přehled v tabulce, s vlastnostmi písma, jako je rodina fontů, velikost, hmotnost, barva a také počet použití písma na webové stránce. Prostřednictvím tabulky sestav můžete snadno optimalizovat použití písma, odstranit to, co je zbytečné, nebo kombinovat styly, které jsou příliš podobné.

CSS Lint

CSS Lint je obložení Nástroj, který analyzuje syntaxi CSS na základě specifických parametrů, které určují výkon, dostupnost a kompatibilitu CSS. Byste překvapeni výsledky, očekávejte spoustu varování ve vašem CSS. Tyto chyby však nakonec pomohou opravit syntaxi CSS a učinit ji efektivnější. Kromě toho budete také lepší CSS spisovatel.

CSS ColorGuard

CSS ColorGuard je relativně novým nástrojem. Je postaven jako modul uzlu a běží na všech platformách: Windows, OS X a Linux. CSS ColorGuard je nástroj příkazového řádku, který vás upozorní, pokud používáte podobné barvy ve vašem stylu; např. # f3f3f3 je docela blízko # f4f4f4, takže možná budete chtít zvážit sloučení obou. CSS ColorGuard je konfigurovatelný, můžete nastavit práh podobnosti a nastavit barvy, které chcete nástroj ignorovat.

CSS Dig

CSS Dig je skript Python a pracuje lokálně na vašem počítači. CSS Dig provede důkladné vyšetření ve vašem CSS. Bude číst a kombinovat vlastnosti, např. všechny deklarace barvy pozadí se dostanou pod část pozadí. Tímto způsobem můžete snadno rozhodovat na základě přehledu, když se snažíte standardizovat svou syntaxi CSS, např. můžete najít barvu napříč styly s následující deklarací barev.

 barva: #ccc; barva: #cccccc; barva: #CCC; barva: #CCCCCC; 

Tato barevná prohlášení dělají totéž. Můžete také jít s #ccc nebo s hlavním městem #CCC jako standard. CSS Dig může tuto redundanci vystavit i pro jiné vlastnosti CSS a budete moci vytvořit kód konzistentnější.