Refaktoryzacja dużych / starych plików CSS

13

Obecnie pracuję na stronie 100 000 stron, obecny projekt istnieje od ponad 5 lat, a kolejne aktualizacje zaowocowały czterema ponad 12 000 liniowymi plikami CSS.

Oczywiście CSS stał się niewygodny, wiele stylów zostało zduplikowanych i prawie niemożliwe jest ustalenie, ile stylów jest aktualnie używanych.

Możemy zminimalizować, ale tak naprawdę nie rozwiązuje to problemu, tylko opóźnia nieuniknioną ponowną pracę.

Więc są trzy pytania, czy są jakieś narzędzia do ...

  • zduplikować duże pliki CSS?
  • skanujesz witrynę i logujesz się w klasie CSS i użyciu ID?
  • czy takie skanowanie można by osiągnąć za pomocą jakiegoś skryptu, np. fatmonkey?
MJWadmin
źródło

Odpowiedzi:

17

http://unused-css.com/ Wykonuje niektóre pytania i mają do powiedzenia:

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.

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.

toomanyairmiles
źródło