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

414

Есть ли хорошие подходы, чтобы помочь определить неиспользуемые определения CSS в проекте? Куча css-файлов была загружена, и теперь я пытаюсь кое-что почистить.

jswanson
источник
Когда вы говорите «в проекте» - что именно вы имеете в виду? В зависимости от того, какую среду вы используете, ответ может быть разным.
Ян Робинсон
Я сделал инструмент, который делает довольно хорошую работу. Вот мой код Pen
toddmo
Я написал сценарий, который может сделать это для вас: github.com/kgoedecke/unused-css-parser
Кевин Гедецке

Ответы:

145

Взгляните на расширение Firefox Dust-Me по адресу https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .

Давид Мединец
источник
14
Расширение не работает в Firefox 4
mvark
5
Это обновление никогда не появлялось, и после запроса на форумах SitePoint может показаться, что плагин так же хорош, как и мертвый.
Майк Б
3
Похоже, автор недавно опубликовал обновленную версию на своем собственном сайте, даже версию для Opera. Проверьте brothercake.com
Funka
2
К сожалению, больше не работает
Джонатан
4
Я написал замену, сканируя несколько страниц на вашем веб-сайте (рекурсивно следуя ссылкам): jitbit.com/unusedcss
Alex
259

В Chrome Developer Tools есть вкладка Audits, на которой могут отображаться неиспользуемые селекторы CSS.

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

введите описание изображения здесь

Дерек Адэйр
источник
64
это здорово, но очень плохо, что вы не можете запустить его на группе страниц (иначе неиспользуемые правила CSS могут быть неизбежны)
Damon
17
Я запускаю инструмент аудита, и он показывает мне неиспользованный CSS, но как его использовать тогда? Нужно ли вручную искать каждый элемент и удалять его?
Тимоти Генри
19
Это только текущая страница. Там написано «2445 правил (83%) CSS, которые не используются текущей страницей», поэтому они не очень полезны.
chhantyal
8
Развернув элемент, вы получите список фактических правил, которые не используются. Хотя это не полезно на сайтах, где вы меняете DOM на лету.
Хауи,
10
На самом деле это только что было перенесено в покрытие - перейдите в аудит -> рядом с Консолью внизу есть меню (меню типа 3 вертикальных точек), и вы можете выбрать покрытие там. Просто нажмите запись и перейдите.
Грэм Ритчи
65

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

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

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

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

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

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

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

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

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

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

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

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

megaSteve4
источник
5
просто обратите внимание, что unused-css.com не позволяет вам загружать CSS, если вы не являетесь платным участником, а самый низкий тариф начинается с $ 29 в месяц! мне кажется, это немного дорого за услугу
georgiecasey
1
Я хотел бы добавить в эту смесь pureycss github.com/purifycss/purifycss . Он бесплатный, довольно популярный (по словам звезд в github) и работает с одностраничными приложениями.
Дмитрий Гончар
21

Google Page Speed может сделать это за вас (на самом деле она делает гораздо больше, чем просто сообщает вам, какой CSS не используется). На FireFox он доступен как дополнение к FireBug. Тогда есть онлайн-версия тоже.

Салман А
источник
8

Лучший CSS Minifier в C # сбрасывает избыточные стили;

Вы также хотели бы использовать Dust-Me с этим.

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

РЕДАКТИРОВАТЬ: ссылка была сломана, но archive.org содержит и страницу, и код.

ЕКМ
источник
7

Использование CSS

Расширение Firebug для просмотра того, какие правила CSS действительно используются.

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

Сомнат Мулук
источник
6

Похоже, что кто-то обновил DustMe Selectors для работы с Firefox снова под новым именем - «Сводка новостей CSS» http://blog.brothersmorrison.com/?p=198

мистифицировать
источник
У автора есть новая версия, опубликованная всего несколько недель назад на его веб-сайте www.brothercake.com
Funka
этот плагин больше не доступен, и ссылка на скачивание на Brothercake мертва
Андреа Мауро
3

Проверьте Google PageSpeed ​​для Firefox . Это делает это, и целый груз больше.

По-видимому, плагин для Chrome также находится в стадии разработки.

Дрю Ноакс
источник