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

В Инструментах разработчика Chrome есть вкладка Аудиты, на которой могут отображаться неиспользуемые Селекторы CSS.

Проведите аудит, а затем в разделе Эффективность веб-страницы см. Удаление неиспользуемых правил CSS.

Я только что нашел этот сайт - http://unused-css.com/

Выглядит неплохо, но мне нужно будет тщательно проверить выведенный «чистый» CSS, прежде чем загружать его на любой из моих сайтов.

Также, как и в случае со всеми этими инструментами, мне нужно было бы проверить, что он не удаляет идентификаторы и классы без стиля, но используются как селекторы JavaScript.

Приведенное ниже содержание взято с http://unused-css.com/, поэтому отдайте им должное за рекомендации других решений. :

латинский Sehgal написал приложение для Windows для поиска и удаления неиспользуемых классов CSS. Я не тестировал его, но, судя по описанию, вы должны указать путь к своим html файлам и одному файлу CSS. Затем программа выведет список неиспользуемых селекторов CSS. На скриншоте видно, что нет возможности экспортировать этот список или загрузить новый чистый файл CSS. Также похоже, что сервис ограничен одним файлом CSS. Если у вас есть несколько файлов, которые вы хотите очистить, вы должны очищать их один за другим.

Dust-Me Selectors - это расширение Firefox (для v1.5 или новее), которое находит неиспользуемые селекторы CSS. Он извлекает все селекторы из всех таблиц стилей на странице, которую вы просматриваете, а затем анализирует эту страницу, чтобы увидеть, какие из этих селекторов не используются. Затем данные сохраняются, так что при тестировании последующих страниц селекторы могут быть вычеркнуты из списка по мере их обнаружения. Предполагается, что этот инструмент сможет сканировать весь веб-сайт, но я, к сожалению, смог заставить его работать. Кроме того, я не верю, что вы можете настроить и загрузить файл CSS с удаленными стилями.

Topstyle - это приложение для Windows, включающее набор инструментов для редактирования CSS. Я не очень много тестировал, но похоже, что у него есть возможность удалить неиспользуемые селекторы CSS. Это программное обеспечение стоит 80 долларов США.

Liquidcity CSS cleaner - это php-скрипт, который использует регулярные выражения для проверки стилей одной страницы. Он сообщит вам классы, которых нет в HTML-коде. Я не тестировал это решение.

Deadweight - это инструмент покрытия CSS. Учитывая набор таблиц стилей и набор URL-адресов, он определяет, какие селекторы фактически используются, и списки, которые можно безопасно удалить. Этот инструмент является рубиновым модулем и работает только с веб-сайтом rails. Неиспользуемые селекторы необходимо вручную удалить из файла CSS.

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

UnusedCSS.com - это веб-приложение с простым в использовании интерфейсом. Введите URL-адрес сайта, и вы получите список селекторов CSS. Для каждого селектора число указывает, сколько раз селектор используется. У этой услуги есть несколько ограничений. Оператор @import не поддерживается. Вы не можете настроить и загрузить новый чистый файл CSS.

CSSESS - это букмарклет, который поможет вам найти неиспользуемые селекторы CSS на любом сайте. Этот инструмент довольно прост в использовании, но он не позволяет вам настраивать и загружать чистые файлы CSS. В нем будут перечислены только неиспользуемые файлы CSS.

Инструменты разработчика Google Chrome имеют (в настоящее время экспериментальную) функцию под названием Обзор CSS что позволит вам найти неиспользуемые правила CSS.

Чтобы включить его, выполните следующие действия:

1. Откройте DevTools (Command + Option + I на Mac; Control + Shift + I в Windows)
2. Перейдите в настройки DevTool (функция + F1 на Mac; F1 в Windows)
3. Нажмите, чтобы открыть раздел "Эксперименты".
4. Включите опцию Обзор CSS