4 Narzędzia do audytu i optymalizacji CSS

Gdy Twoja strona zacznie rosnąć, twój kod również się zwiększy. Wraz z rozwojem kodu CSS może nagle stać się trudny w utrzymaniu i może się skończyć nadpisaniem jednej reguły CSS inną. To komplikuje sytuację i prawdopodobnie będziesz miał mnóstwo błędów.

Jeśli tak się dzieje, czas na ciebie skontroluj CSS swojej witryny. Inspekcja CSS pozwoli ci zidentyfikować części twojego CSS, które nie są zoptymalizowane. Możesz również zmniejszyć rozmiar pliku arkusza stylów, eliminując wiersze kodu, które spowalniają działanie witryny.

Oto 5 dobrych narzędzi do kontroli i optymalizacji CSS.

Type-o-matic

Type-o-matic to wtyczka Firebug do analizowania czcionek używanych na stronie internetowej. Ta wtyczka daje wizualny raport w tabeli, zawierający właściwości czcionki, takie jak rodzina czcionek, rozmiar, waga, kolor, a także liczba razy, gdy czcionka jest używana na stronie internetowej. Za pomocą tabeli raportów można łatwo zoptymalizować użycie czcionki, usunąć niepotrzebne lub połączyć zbyt podobne style.

CSS Lint

CSS Lint jest strzępienie narzędzie, które analizuje składnię CSS w oparciu o określone parametry adresowania pod kątem wydajności, dostępności i kompatybilności Twojego CSS. Byłbyś zaskoczony wynikami, spodziewaj się wielu ostrzeżeń w swoim CSS. Błędy te pomogą jednak w poprawieniu składni CSS i zwiększeniu jej wydajności. Dodatkowo będziesz także lepszym pisarzem CSS.

CSS ColorGuard

CSS ColorGuard jest stosunkowo nowym narzędziem. Jest zbudowany jako moduł Node i działa na wszystkich platformach: Windows, OS X i Linux. CSS ColorGuard to narzędzie wiersza poleceń, które powiadomi Cię, jeśli używasz podobnych kolorów w arkuszu stylów; na przykład. # f3f3f3 jest bardzo blisko # f4f4f4, więc warto rozważyć połączenie obu. CSS ColorGuard jest konfigurowalny, można ustawić próg podobieństwa, a także ustawić kolory, które ma ignorować narzędzie.

CSS Dig

CSS Dig jest skryptem Pythona i działa lokalnie na Twoim komputerze. CSS Dig przeprowadzi dokładne badanie w swoim CSS. Będzie czytać i łączyć właściwości np. wszystkie deklaracje kolorów tła zostaną umieszczone pod sekcją tła. W ten sposób możesz łatwo podejmować decyzje na podstawie raportu podczas próby standaryzacji składni CSS, np. możesz znaleźć kolor w różnych stylach z następującą deklaracją koloru.

 kolor: #ccc; color: #cccccc; kolor: #CCC; kolor: #CCCCCC; 

Te deklaracje kolorów robią to samo. Równie dobrze możesz iść z #ccc lub ze stolicą #CCC jako standard. CSS Dig może ujawnić tę redundancję także dla innych właściwości CSS, a będziesz mógł uczynić swój kod bardziej spójnym.