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

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

355
задан jswanson 25 сент. '08 в 23:03
источник поделиться

9 ответов

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

138
ответ дан David Medinets 25 сент. '08 в 23:04
источник поделиться

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

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

enter image description here

222
ответ дан Derek Adair 24 июня '10 в 22:08
источник поделиться

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

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

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

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

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

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

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

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

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

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

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

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

60
ответ дан megaSteve4 08 июня '11 в 20:18
источник поделиться

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

18
ответ дан Salman A 17 мая '11 в 13:28
источник поделиться

Улучшенный CSS Minifier в С# удаляет избыточные стили;

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

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

РЕДАКТИРОВАТЬ: ссылка была нарушена, но у архиватора есть как страница, так и код.

8
ответ дан mjc 25 сент. '08 в 23:07
источник поделиться

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

7
ответ дан Josh 21 окт. '11 в 19:36
источник поделиться

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

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

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

6
ответ дан Somnath Muluk 10 мая '12 в 13:26
источник поделиться

Использовать Панель инструментов разработчика Internet Explorer, s Просмотp > Матчи селектора CSS: просмотр отчета обо всех правилах стиля и сколько раз они используются на текущей странице.

3
ответ дан Jitendra Vyas 22 янв. '10 в 22:23
источник поделиться

Отъезд Google PageSpeed ​​для Firefox. Он делает это и большую нагрузку.

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

2
ответ дан Drew Noakes 27 сент. '10 в 20:49
источник поделиться

Другие вопросы по меткам