Aby sprawdzić, czy dana klasa CSS jest używana na stronie, istnieje kilka metod. Można to zrobić ręcznie lub za pomocą narzędzi deweloperskich. Oto kilka sposobów:
1. Narzędzia deweloperskie w przeglądarkach
Większość nowoczesnych przeglądarek (np. Chrome, Firefox, Edge) posiada wbudowane narzędzia deweloperskie, które mogą pomóc w sprawdzeniu, czy dana klasa CSS jest używana.
Instrukcja dla Google Chrome:
- Otwórz stronę, na której chcesz sprawdzić, czy dana klasa CSS jest używana.
- Kliknij prawym przyciskiem myszy na stronie i wybierz Zbadaj element (Inspect).
- Przejdź do zakładki Elements, która wyświetla strukturę HTML strony.
- Wciśnij
Ctrl + F(Windows) lubCmd + F(Mac) i wpisz nazwę klasy, którą chcesz znaleźć, poprzedzoną kropką (np..mojaklasa). - Jeśli narzędzie znajdzie elementy z tą klasą, oznacza to, że jest ona używana na stronie. Jeśli nic nie zostanie znalezione, klasa prawdopodobnie nie jest stosowana w bieżącym HTML.
Opcjonalnie: Konsola
Możesz użyć również konsoli w narzędziach deweloperskich:
- Otwórz konsolę w narzędziach deweloperskich.
- Wpisz poniższe polecenie, aby sprawdzić, czy istnieją elementy z daną klasą:
document.querySelectorAll('.nazwa-klasy').length
- Jeśli wynik to liczba większa niż 0, oznacza to, że klasa jest używana. Jeśli wynik to 0, klasa nie jest używana.
2. Użycie narzędzi online
Istnieją narzędzia takie jak CSS Stats lub PurgeCSS, które analizują CSS strony i mogą wykryć nieużywane klasy:
- CSS Stats: Analizuje stronę i wyświetla szczegółowe statystyki dotyczące stylów CSS, w tym informacje o używanych klasach.
- PurgeCSS: Automatycznie usuwa nieużywane style, przeszukując strukturę HTML i pliki CSS. Możesz użyć tego narzędzia w projekcie do sprawdzenia, które klasy CSS są faktycznie używane.
3. Ręczna analiza kodu
Jeśli preferujesz manualną kontrolę:
- Przejdź do pliku HTML i plików CSS.
- Wyszukaj klasę w pliku HTML lub użyj narzędzia IDE, które pozwala przeszukiwać kod całego projektu.
- Jeśli dana klasa nie występuje w żadnym elemencie HTML, oznacza to, że nie jest używana.
4. Użycie narzędzi do czyszczenia CSS
Narzędzia takie jak UnCSS lub PurifyCSS analizują kod HTML i CSS, a następnie generują raport o nieużywanych klasach, które można bezpiecznie usunąć.
Przykład użycia UnCSS:
- UnCSS analizuje HTML i CSS, a następnie generuje nowy plik CSS bez zbędnych klas. Można go użyć lokalnie lub poprzez wiersz poleceń:
npm install -g uncss uncss index.html > cleaned-style.css
Dzięki tym metodom będziesz mógł szybko sprawdzić, czy dana klasa CSS jest używana na stronie.