Jak zidentyfikować nieużywane definicje css

414

Czy istnieją jakieś dobre podejścia, które pomogą zidentyfikować nieużywane definicje css w projekcie? Pobierano kilka plików css i teraz próbuję trochę posprzątać.

jswanson
źródło
Kiedy mówisz „w projekcie” - co dokładnie masz na myśli? W zależności od używanego środowiska odpowiedź może być inna.
Ian Robinson
Zrobiłem narzędzie, które robi całkiem dobrą robotę. Oto mój Code Pen
toddmo
Napisałem skrypt, który może to dla ciebie zrobić: github.com/kgoedecke/unused-css-parser
Kevin Goedecke

Odpowiedzi:

145

Spójrz na rozszerzenie Firefox Dust-Me na https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .

David Medinets
źródło
14
Rozszerzenie nie działa w przeglądarce Firefox 4
mvark,
5
Ta aktualizacja nigdy się nie pojawiła i po zapytaniu na forach SitePoint wydaje się, że wtyczka jest tak dobra, jak martwa.
Mike B
3
Wygląda na to, że autor opublikował niedawno zaktualizowaną wersję na swojej stronie internetowej, nawet wersję dla Opery. Sprawdź brothercake.com
Funka
2
Niestety nie działa
Jonathan
4
Napisałem zamiennik, indeksuje wiele stron w Twojej witrynie (rekurencyjnie podążam
Alex
259

Narzędzia dla programistów Chrome mają kartę Audyty , która może pokazywać nieużywane selektory CSS.

Przeprowadź audyt, a następnie w obszarze Wydajność strony internetowej zobacz Usuwanie nieużywanych reguł CSS

wprowadź opis zdjęcia tutaj

Derek Adair
źródło
64
to jest niesamowite, ale szkoda, że ​​nie możesz uruchomić go na grupie stron (w przeciwnym razie nieużywane reguły CSS mogą być nieuniknione)
Damon
17
Uruchamiam narzędzie do audytu i pokazuje mi nieużywany css, ale jak go wtedy użyć? Czy muszę ręcznie przeszukiwać każdy element i go usuwać?
Timothée HENRY
19
To tylko bieżąca strona. Mówi „2445 reguł (83%) CSS nieużywanych przez bieżącą stronę”, więc nie jest to naprawdę pomocne.
chhantyal
8
Po rozwinięciu elementu pojawi się lista faktycznych reguł, które nie są używane. Chociaż nie jest to pomocne w witrynach, w których zmieniasz DOM w locie.
Howie,
10
Właściwie to właśnie zostało przeniesione do zasięgu - przejdź do audytów -> obok Konsoli na dole znajduje się menu (menu typu 3 kropki w pionie) i tam możesz wybrać zasięg. Po prostu kliknij nagrywaj i nawiguj.
Graham Ritchie
65

Właśnie znalazłem tę stronę - http://unused-css.com/

Wygląda dobrze, ale musiałbym dokładnie sprawdzić wygenerowany „czysty” css przed przesłaniem go na którąkolwiek z moich stron.

Podobnie jak w przypadku wszystkich tych narzędzi , muszę sprawdzić, czy nie usuwa identyfikatorów i klas bez stylu, ale jest używanych jako selektory JavaScript.

Poniższa treść pochodzi ze strony http://unused-css.com/, więc pochwal ich za polecanie innych rozwiązań:

Latish Sehgal napisał aplikację systemu Windows do wyszukiwania i usuwania nieużywanych klas CSS. Nie testowałem tego, ale z opisu musisz podać ścieżkę do plików HTML i jednego pliku CSS. Następnie program wyświetli listę nieużywanych selektorów CSS. Ze zrzutu ekranu wygląda na to, że nie ma możliwości wyeksportowania tej listy lub pobrania nowego, czystego pliku CSS. Wygląda również na to, że usługa jest ograniczona do jednego pliku CSS. Jeśli masz wiele plików, które chcesz wyczyścić, musisz je wyczyścić jeden po drugim.

Dust-Me Selectors to rozszerzenie Firefoksa (dla wersji 1.5 lub nowszej), które znajduje nieużywane selektory CSS. Wyodrębnia wszystkie selektory ze wszystkich arkuszy stylów na przeglądanej stronie, a następnie analizuje tę stronę, aby zobaczyć, który z tych selektorów nie jest używany. Dane są następnie przechowywane, aby podczas testowania kolejnych stron selektory mogły zostać wykreślone z listy w miarę ich spotykania. To narzędzie powinno być w stanie przeszukać całą stronę internetową, ale niestety mogę sprawić, by działało. Ponadto nie sądzę, że można skonfigurować i pobrać plik CSS z usuniętymi stylami.

Topstyle to aplikacja systemu Windows zawierająca wiele narzędzi do edycji CSS. Nie testowałem tego zbyt wiele, ale wygląda na to, że ma możliwość usuwania nieużywanych selektorów CSS. To oprogramowanie kosztuje 80 USD.

Cleancity CSS Cleaner to skrypt php, który używa wyrażeń regularnych do sprawdzania stylów jednej strony. Powie ci klasy, które nie są dostępne w kodzie HTML. Nie testowałem tego rozwiązania.

Deadweight to narzędzie do obsługi CSS. Biorąc pod uwagę zestaw arkuszy stylów i zestaw adresów URL, określa, które selektory są rzeczywiście używane, oraz listy, które można „bezpiecznie” usunąć. To narzędzie jest modułem rubinowym i będzie działało tylko z witryną z szynami. Nieużywane selektory należy ręcznie usunąć z pliku CSS.

Helium CSS to narzędzie javascript do wykrywania nieużywanego CSS na wielu stronach witryny. Najpierw musisz zainstalować plik javascript na stronie, którą chcesz przetestować. Następnie musisz wywołać funkcję helu, aby rozpocząć czyszczenie.

UnusedCSS.com to aplikacja internetowa z łatwym w użyciu interfejsem. Wpisz adres strony, a otrzymasz listę selektorów CSS. Dla każdego selektora liczba wskazuje, ile razy selektor jest używany. Ta usługa ma kilka ograniczeń. Instrukcja @import nie jest obsługiwana. Nie można skonfigurować i pobrać nowego czystego pliku CSS.

CSSESS to bookmarklet, który pomaga znaleźć nieużywane selektory CSS w dowolnej witrynie. To narzędzie jest dość łatwe w użyciu, ale nie pozwala na konfigurację i pobieranie czystych plików CSS. Wyświetla tylko nieużywane pliki CSS.

megaSteve4
źródło
5
tylko uwaga, że ​​unused-css.com nie pozwala ci pobrać CSS bez bycia opłacanym członkiem, a najniższy plan zaczyna się od 29 $ miesięcznie! Wydaje mi się to trochę drogie
georgiecasey
1
Dodałbym do mixu purifycss github.com/purifycss/purifycss . Jest bezpłatny, dość popularny (według gwiazdek w github) i współpracuje z aplikacjami jednostronicowymi.
Dmitry Gonchar,
21

Google Page Speed może to zrobić dla Ciebie (w rzeczywistości robi znacznie więcej niż tylko mówienie, który CSS jest nieużywany). W FireFox jest dostępny jako dodatek FireBug. Jest też wersja online.

Salman A.
źródło
8

Lepszy CSS Minifier w C # zrzuca zbędne style;

Z tym też chciałbyś użyć Dust-Me.

Pamiętaj, że jeśli jest jakaś treść, która nie jest obecnie widoczna dla mnie, możesz wyrzucić potrzebne style.

EDYCJA: link został uszkodzony, ale archive.org ma zarówno stronę, jak i kod.

mjc
źródło
7

Wykorzystanie CSS

Rozszerzenie Firebug, aby zobaczyć, które reguły CSS są faktycznie używane.

Użycie CSS to rozszerzenie Firebug (dlatego jest konieczne, aby mieć zainstalowany Firebug), który pozwala poznać nieużywane reguły stylu CSS. Określa CSS, którego używasz, a których nie używasz. Pozwala wskazać, które niepotrzebne części można usunąć. Zdecydowanie powinieneś użyć tego dodatku, aby pliki CSS były tak lekkie, jak to możliwe.

Somnath Muluk
źródło
6

Wygląda na to, że ktoś zaktualizował selektory DustMe do współpracy z Firefoksem pod nową nazwą - „CSS Roundup” http://blog.brothersmorrison.com/?p=198

Josh
źródło
Autor opublikował nową wersję opublikowaną zaledwie kilka tygodni temu na swojej stronie internetowej: www.brothercake.com
Funka
ta wtyczka nie jest już dostępna, a link do pobrania jest na bracie nie żyje
Andrea Mauro
3

Użyj Internet Explorer Developer Toolbar , s Widok> CSS selektor pasuje : Zobacz raport wszystkich zasad określonych stylów i ile razy są one wykorzystywane na bieżącej stronie.

Jitendra Vyas
źródło