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

Как найти не используемые CSS? [закрыт]

Закрыт. На этот вопрос невозможно дать объективный ответ. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы на него можно было дать ответ, основанный на фактах и цитатах.

Закрыт 6 лет назад .

Существует ли какой-нибудь онлайн сервис, чтобы в одно окно можно было вставить html -код страницы, в другое css -файл и он выдал какие стили не используются в html (на них нет ни одной ссылки в коде). Или для ПК может софт какой есть для этого?

Отслеживать
9,323 3 3 золотых знака 29 29 серебряных знаков 57 57 бронзовых знаков
задан 31 июл 2017 в 14:41
858 4 4 золотых знака 11 11 серебряных знаков 25 25 бронзовых знаков

@fosh4455 у вас сайт из одной страницы состоит? Есть несколько нюансов такой очистки. Используете какую нибудь автоматизацию для CSS, JS вроде Gulp, Grunt? Пре-, пост-, процессоры CSS?

31 июл 2017 в 18:50
npmjs.com/package/gulp-uncss убирает уже неиспользуемые на странице стили
2 авг 2017 в 13:22

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

F12 в Google Chrome Developer Tools и смотрим вкладку Audits там секцию «Remove unused CSS rules». Запускаем, смотрим результаты

Отслеживать
ответ дан 31 июл 2017 в 14:56
858 4 4 золотых знака 11 11 серебряных знаков 25 25 бронзовых знаков

У меня 60ая версия, вкладка Audits есть, но там нет того, что вы говорите. Вероятно у вас доп.плагин установлен.

31 июл 2017 в 21:59
@AndreyFedorov, в Audits запускаете «run» ждете и раскрываете списки prntscr.com/g3fnrl
2 авг 2017 в 13:21

Подобная функция доступна в хроме версии 59+

Отслеживать
ответ дан 31 июл 2017 в 14:47
54 6 6 бронзовых знаков

в gulp(система сбора веб-приложений) есть task`и, которые могут выполнять разного рода обыденные действия, например минимизировать файлы css, js и т.д. Добавлять префиксы, сжимать jpg, png и тому подобное, его легко выучить, только немного нужно знать js, будет проще. Если хочешь можешь мне файлы скинуть, я их прогоню и удалит тебе css ненужный

Отслеживать
ответ дан 31 июл 2017 в 16:12
Евгений Прошин Евгений Прошин
175 4 4 бронзовых знака

Да я программер так-то gulp не юзаю обычно, так ставил его на 1 комп познакомиться. Верстаю немного для себя чисто

Поиск неиспользуемого кода JavaScript и CSS с помощью средства «Охват»

Средство покрытия поможет найти неиспользуемый код JavaScript и CSS. Удаление неиспользуемого кода может ускорить загрузку страницы и сохранить сотовые данные мобильных пользователей.

Найти неиспользуемый код относительно легко. Но рефакторинг базы кода, чтобы каждая страница предоставляла только необходимые коды JavaScript и CSS, может быть сложной задачей. В этом руководстве не рассматривается рефакторинг базы кода, чтобы избежать неиспользуемого кода, так как рефакторинг зависит от стека технологий.

Обзор

Доставка неиспользуемых JavaScript или CSS является распространенной проблемой при веб-разработке. Например, предположим, что вы хотите использовать компонент кнопки начальной загрузки на странице. Чтобы использовать компонент кнопки, необходимо добавить ссылку на таблицу стилей начальной загрузки в HTML-коде, как показано ниже:

Эта таблица стилей не только содержит код для компонента кнопки. Он содержит CSS для всех компонентов начальной загрузки. Но вы не используете другие компоненты начальной загрузки. Таким образом, ваша страница скачит кучу CSS, которая ей не нужна.

Эта дополнительная css является проблемой по следующим причинам:

• Дополнительный код замедляет загрузку страницы.
• Если пользователь обращается к странице на мобильном устройстве, дополнительный код использует данные сотовой связи.

Открытие средства покрытия

1. Откройте меню Команда.
2. Начните вводить текст coverage , выберите команду Показать покрытие и нажмите клавишу ВВОД. В ящике откроется инструмент «Покрытие«.

Объем кода записи

1. Нажмите одну из следующих кнопок в средстве покрытия :
   • Щелкните Начать страницу охвата инструментирования и перезагрузку (), чтобы узнать, какой код необходим для загрузки страницы.
   • Щелкните Покрытие инструментом (), чтобы узнать, какой код используется после взаимодействия со страницей.
2. Нажмите кнопку Остановить инструментирование покрытия и показать результаты (), чтобы остановить охват кода записи.

Анализ объема кода

В таблице средства покрытия отображаются ресурсы, которые были проанализированы, и сколько кода используется в каждом ресурсе. Щелкните строку, чтобы открыть этот ресурс в средстве «Источники» и отобразить построчное разбивку используемого кода и неиспользуемого кода.

Отчет о покрытии кода:

Столбцы в отчете о покрытии кода:

Столбец	Описание
URL-адрес	URL-адрес проанализированного ресурса.
Тип	Содержит ли ресурс CSS, JavaScript или и то, и другое.
Всего байтов	Общий размер ресурса в байтах.
Неиспользуемые байты	Количество байтов, которые не использовались.
Последний, неименованный столбец	Визуализация столбцов Всего байтов и Неиспользуемых байтов . Красная часть полосы — это неиспользуемые байты. В зеленом разделе используются байты.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.

Как убрать лишние и неиспользуемые стили в CSS

Как-то сливал часть шаблона с купленной темы для WordPress, чтобы получить обыкновенный html-файл, после чего его нужно было вновь натянуть на шаблон для WordPress.

Если вы считаете, что это бесполезный труд — вы не работали с покупными темами для WordPress. У 95% этих шаблонов ебанутый код, нелогичная архитектура и от малейшей кастомизации вёрстка едет далеко за границы ваших мониторов.

Плюс всё это говно сильно тормозит сайт. Но этого мало и шаблоны тянут за собой ворох дырявых плагинов, которые можно заменить парой строк в functions.php, чем ещё сильнее душит дешёвый шаред хостинг на сраном Бегете, ценой в обед шавермой.

Как почистить CSS

Раньше в Хроме была такая фича — браузер подсказывал что можно оптимизировать на странице, в том числе и какие стили можно удалить. Начал искать фичу — не нашёл. Искал куда перенесли пункт в сети, но ничего нет, только старые мануалы, не соответствующие действительности.

Даже попытался попробовать какие-то плагины для Firefox, но они не вставали на Quantum, либо были совсем заброшены.

А спустя пару дней я случайно нашёл куда переместился пункт с аудитом страницы в Chrome. Раньше раздел для проверки кода, показывающий ненужные css-стили, назывался Audits. Теперь там совершенно другой отчёт, а нужный нам переместился в Legacy Audits.

Вот как жить, если такие важные фичи переносят в другое место, а оповещений нет? Несколько дней искал решение проблемы!

Открываем инструменты разработчика (комбинацией ⌥ + ⌘ + I или из меню) и жмём сюда:

Жмём Run и ждём несколько секунд.

Ура, теперь мы знаем какие стили можно удалить.

Осторожней с чисткой! Если на тестируемой странице не используются какие-то css-стили, то это не значит, что они не используются на всём сайте.

А теперь давайте дружно отпостим эту статью в социальные сети, чтобы зашло побольше людей, вырос ПФ у странички и она вышла в топ по запросам, связанным с чисткой css. Бедные юзеры всё ещё находят неактуальные инструкции, открывают вкладку Audits и не получают желаемое!

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

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

• Вопрос задан более трёх лет назад
• 1725 просмотров

7 комментариев

Простой 7 комментариев

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

Максим Герасименко @maxg5 Автор вопроса

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

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

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

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

Вова Дружаев @OtshelnikFm
Антон, какой 5G? Еще не живем. Говеный 3G за мкадом и от центра города
Владимир Дружаев, смените оператора

Вова Дружаев @OtshelnikFm

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

Решения вопроса 0
Ответы на вопрос 3

Вова Дружаев @OtshelnikFm
Мои работы: otshelnik-fm.ru

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

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

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

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