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

Question

[JilkaVaSe]

Всем привет. У проекта есть CSS файл, в него писали пару лет, со временем число неиспользуемой разметки перевалило за 50%.
Есть шаблоны, есть CSS файл. Есть ли сервисы которые сделают очистку в автоматическом режиме или может быть есть какой текстовый редактор, который подсвечивает только используемые в проекте стили?
Заранее спасибо)

Comments

[uniquenickname111]

Никаких тулзов нету. Только руками.
Фишка в том, что CSS может налагаться-убираться джаваскриптом в ответ на действия юзера. Также при определенной активности на сервере, скажем с сервера пришел кусочек хтмл-а и теперь тот или инной клас стал нужным итд итд.
Или же: любая страница грузит весь бандл стилей, а вот используются они на своих особых страницах. Или же: у вас Ангулар-реакт-вуе и до поры до времени некий компонент вообще отсутствует в странице, а потом происходит какая то активность и опппа -- а где мои стили.
Так что не ведитесь.
Автоматом цсс чистится только на примитивных лендингах

Answer 1

[Михаил Попов]

Я пользуюсь библиотекой mincss на Python. Можно установить от сюда: https://github.com/peterbe/mincss
Сделал видео, как пользоваться библиотекой: https://www.youtube.com/watch?v=Vg7XvAJz7H4

Answer 2

[IceJOKER]

https://addons.mozilla.org/en-US/firefox/addon/css...

stackoverflow.com/questions/135657/tool-to-identif...

https://unused-css.com/

Answer 3

[Дима]

Простой и быстрый сервис: https://uncss-online.com/

Answer 4

[Nikbes]

Посмотрите сюда

Answer 5

[sergikzv]

Для gulp и grunt есть плагин uncss вроде, автоматом при сборке будет чистить.

Answer 6

[ValentinWebDev]

Можно использовать Google Chrome. В инспекторе это инструмент Coverage

Comments

[Глюкъ Виртуален]

Круто, мерсибо.

[Дмитрий]

СПС

Answer 7

[Дмитрий Платонов]

Многие способы уже не работают
Тут описан актуальный на 2019 год способ
https://molotok-studio.ru/blog/kak-udalit-lishnie-...

Comments

[Глюкъ Виртуален]

Мерсибо ку.

[glem1337]

На текущий момент эта инструкция тоже не актуальна. Верно? Дело в том что Firevox Developer Edition даже не реагирует на Ctrl + F2, и csscoverage не работает.

Answer 8

[Al-ex]

Долго мучился пока нашел адекватное решение. Помогло расширение для chrome. Оно сохраняет только используемые на странице CSS стили и помечает комментарием источник. Описание тут https://fastcms.ru/kak-ubrat-lishnie-css-stili-so-...

Comments

[Глюкъ Виртуален]

Неа, этот не может собрать стили со всего сайта, только с одной страницей работает :(

[Al-ex]

Это пока что лучший вариант, который нашел. Все что я видел до этого - поиск неиспользуемых и предложение вручную их удалить (ОМГ). По всем страницам проходить не нужно, только по типовым - главная, статья, запись блога, авторизация. Не быстро, но хоть как то теперь можно обработать.