Как найти не используемые css классы?

Question

[Максим Герасименко]

Есть сайт на WordPress. Нужно в style.css найти и удалить не используемые классы.
Подскажите пожалуйста, может есть какой то онлайн сервис? Или может можно через браузер найти?

Comments

[Антон Иванов]

Какие цели вы преследуете? Чистка css файла не даст вам значительного прироста производительности и незначительного тоже.

[Максим Герасименко]

Антон,
Ну ведь уменьшиться размер CSS файла, а значит возрастет скорость загрузки сайта?
А на SEO это как то влияет?

[Антон Иванов]

Максим Герасименко, знаете, это не то "узкое" место на вашем сайте, которое требует оптимизации. Ну сколько весит ваш файл стилей? 300 КБ? 500КБ? Ну уменьшите вы его, о боги!, в 2 раза. Мы живем в веке 5G, мы живем в веке, когда все кешируется ... Надеюсь, понятно объяснил.

SEO тут вообще рядом не стояло.

[yarovikov]

Максим Герасименко, это смешно

[Вова Дружаев]

Антон, какой 5G? Еще не живем. Говеный 3G за мкадом и от центра города

[Антон Иванов]

Владимир Дружаев, смените оператора

[Вова Дружаев]

Антон, дело не в операторе.
Мне скажи где там 5g гуляет по стране? Если это отличается от дефолт сити?

Answer 1

[Вова Дружаев]

Разбивай на компоненты код - и потом на сборку. Как весь мир фронтенд собирает

В момент когда будешь спагетти css разбирать на секции - ты найдешь неиспользуемые стили.
Но это в трио: css, html, js - только так найдешь по всем.

Еще вариант - я вижу что css с душком (без префикса, без BEM и т.д.) - то провожу поиск этого имени по всему проекту. В коде, верстке в js - он найдет все вхождения. Если не найдет - смело удаляй. Но - при условии что ты знаешь как работает проект. А то наломаешь дров если там зависимость от чего-то с третьей стороны идёт.

css не чистить надо. Его надо разбивать на модули - файлы. И тогда бардака не будет. И объединять все файлы тем же вебпаком

Comments

[Одиночка Айс]

css с душком (без префикса, без BEM и т.д.)

лол...

[Сергей]

Ты реально думаешь когда человек задает такой вопрос, он поймет что ты ответил?

[Вова Дружаев]

Сергей, стоит помнить что вопросы/ответы здесь - база знаний.
Не поможет ему - поможет другому пользователю, что придет с аналогичным вопросом позже.

Answer 2

[Александр]

Статья для Chrome DevTools. Однако, если при тесте не нашлось элемента с классом, который на самом деле используется, будет отмечен как неиспользуемый.

Comments

[Максим Герасименко]

А как использовать Chrome DevTools, не совсем понял. Вот я зашел в Covarage. И как тут увидеть не используемые CSS классы на сайте?

[Александр]

Максим Герасименко, вот в списке есть некоторое количество CSS файлов, выбираем любой, и красным цветом будут выделены неиспользуемые классы (которые не были замечены во время Coverage теста).

[Adamos]

Лучше не делать это ни вручную, ни автоматически. Такие тесты пропустят классы, используемые для оформления сообщений об ошибках, например - пока не появится такое сообщение. Экономия на спичках, приводящая к плохо предсказуемым проблемам.

Answer 3

[Warlynn]

Попробуйте этот сервис

Answer 4

[Gran Torino]

post css https://github.com/komachi/usedcss, https://github.com/uncss/uncss

или через это https://github.com/geuis/helium-css