Jak znaleźć nieużywane / niestosowane reguły CSS w arkuszu stylów?

18

Mam ogromny plik CSS i plik HTML. Chciałbym dowiedzieć się, które reguły nie są używane podczas wyświetlania pliku HTML. Czy są na to narzędzia?

Plik CSS ewoluował przez kilka lat i z tego, co wiem, nikt nigdy niczego z niego nie usunął - ludzie ciągle pisali nowe, nadrzędne zasady.

EDYCJA: Sugerowano użycie Selektorów Dust-Me lub narzędzia wydajności strony internetowej Chrome. Ale oba działają na poziomie selektorów, a nie na poszczególnych zasadach. Mam wiele przypadków, w których reguła w selektorze jest zawsze nadpisywana - i tego właśnie najbardziej chcę się pozbyć. Na przykład:

body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }

Cały tekst w moim HTML jest wewnątrz jakiegoś elementu opakowania, więc nigdy nie jest biały. bodyWypełnienie zawsze działa, więc oczywiście bodynie można usunąć całego selektora. Chciałbym też pozbyć się tak bezużytecznych zasad.

EDYCJA: I kolejny przypadek bezużytecznej reguły: gdy powiela istniejącą, nie zmieniając niczego:

a       { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }

Z radością pozbyłbym się drugiego margin-left... znowu wydaje mi się, że te narzędzia nie znajdują takich rzeczy.

EDYCJA: Doceniam wszystkie odpowiedzi, ale niestety narzędzia, które zasugerowałeś, nie przyniosły żadnych użytecznych sugestii. Poparłem twoje odpowiedzi, ale poczekam na narzędzie, które robi wszystko bardziej szczegółowo, jak określono powyżej.

Dziękuję Ci,

css optimization liori
źródło
Możesz wykorzystać brak odpowiedniego narzędzia jako okazję: ponieważ rozumiesz, czego potrzebujesz, możesz być najlepszą osobą do stworzenia takiego narzędzia. Możesz sprawdzić kod istniejących narzędzi pod kątem pomysłów i technik, a następnie zbudować coś, co działa na poziomie reguły, a nie selektora. Twoja szansa na sławę i fortunę! ... cóż, może po prostu sława;)
iconoclast
@Brandon: to pytanie właśnie trafiło w znak „godnego uwagi pytania”… więc możesz mieć rację :-)
liori

Odpowiedzi:

8

Rozszerzenie Dust Me Selecters Firefox

W Narzędziach programisty Chrome możesz użyć narzędzia Wydajność strony internetowej, aby znaleźć nieużywane reguły CSS.

John Conde
źródło
Świetnie, sprawdzę to od razu!
liori
Te narzędzia mogą usuwać tylko niepotrzebne selektory. Wyjaśniłem moje pytanie.
liori
2
@liori: Nie sądzę, aby było to wiarygodne. W twoim przykładzie marginesu druga reguła marginesu może wydawać się zbędna, ale ma wyższą specyficzność i może zastąpić późniejszą regułę. Na przykład, jeśli klasa .abcma inny margines, <a class="abc">myślę , że zmieniłby margines po najechaniu myszą. To prawdopodobnie nie jest to, co zamierzasz, ale z pewnością może być i nie możesz ślepo usunąć tej zduplikowanej reguły.
DisgruntledGoat
@DisgruntledGoat: Mam na myśli przypadek zamkniętego świata: jeśli nie jest określony, nie istnieje. Jeśli więc nie ma definicji a.abclub nie ma <a class="abc"/> nigdzie w kodzie HTML, to nie istnieje. W każdym razie już zakończyłem zadanie, które skłoniło mnie do zadania tego pytania tutaj i zakończyłem z zastosowaniem wielu heurystyk. Wypróbowałem Narzędzia programistyczne Chrome, ale niewiele mi pomogły.
liori
5

Możesz także zajrzeć na Unused-CSS.com To narzędzie zbada twoje strony i zbuduje zoptymalizowane pliki CSS bez nieużywanych selektorów


źródło
4

Zawsze lubiłem użycie CSS . Jest to wtyczka do Firebuga i pozwala zeskanować stronę i zobaczyć, które reguły CSS nie są stosowane. Będzie nawet automatycznie skanować i działać na kilku stronach.

macca1
źródło
2

Sprawdź uncss, to moduł węzła.

„UnCSS to narzędzie, które usuwa nieużywany CSS z arkuszy stylów. Działa w wielu plikach i obsługuje CSS wstrzykiwany przez Javascript”.

https://www.npmjs.com/package/uncss

Edytuj po komentarzu:

Myślę, że pytasz o dwie różne rzeczy:

  1. Automatycznie usuwaj nieużywane reguły, to właśnie może dla Ciebie zrobić Uncss. Zrobiłem też to narzędzie, CSS, żegnaj, ale nie jest to automatyczne, jak pytasz: https://www.npmjs.com/package/css-byebye

  2. Zoptymalizuj arkusz stylów, w którym reguły mogą zostać scalone / uproszczone.

W takim przypadku poleciłbym dwa narzędzia, które robią takie rzeczy:

Robią mniej więcej te same optymalizacje, czasami jedna ma lepsze wyniki niż druga, a czasem jest odwrotnie. To zależy od twojego arkusza stylów. (możesz też biegać jeden po drugim: P)

Używam ich jako części procesu kompilacji z pomrukiem. Więc to nie jest tak wizualna rzecz, jak pytasz, ale wykonują optymalizacje, które chcesz.

Oto, co mówią o CSSO (pełne informacje tutaj: https://en.bem.info/tools/optimizers/csso/ )

Optymalizacje strukturalne:

  • Scalanie bloków z identycznymi selektorami
  • Scalanie bloków o identycznych właściwościach
  • Usuwanie zastąpionych właściwości
  • Usuwanie zastąpionych właściwości skrótów
  • Usunięcie powtarzających się selektorów
  • Częściowe scalanie bloków
  • Częściowe dzielenie bloków
  • Usunięcie pustego zestawu reguł i reguły
  • Minimalizacja marginesów i właściwości wypełniania
Kev
źródło
Sądząc ze strony głównej, działa na poziomie selektora. Czy rzeczywiście może usunąć reguły w dwóch przykładowych przypadkach, o których wspomniałem w pytaniu?
liori
Zredagowałem swoją odpowiedź. Testowałem twój pierwszy przykład z interfejsem CSSO: wynik: body {color: #fff; padding: 10em} h1, p, ul {color: # 000}
Kev
1

@John: doskonałe narzędzie, dzięki za link

@liori: Gorąco poleciłbym również wtyczkę Firefox Web Developer, która pozwala wyświetlać nazwy / właściwości elementów, edytować css w czasie rzeczywistym (nie zapisuje pliku css), abyś mógł edytować i testować zmiany css bez faff konieczności zapisywania i przesyłania css co 3 sekundy. + ładuje więcej funkcji.

Jest też bardzo fajny inspektor DOM, który podłącza się do Firebug, który również się podłącza i jest świetny do sortowania Javascript.

Cyfrowa esencja
źródło