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


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

9 390

9 ответов:

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

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

запустите аудит, затем, под Веб-Страницы посмотреть удалить неиспользуемые правила CSS

enter image description here

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

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

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

ниже содержание берется из http://unused-css.com/ так что отдайте им должное рекомендуя другие решения:

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

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

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

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

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

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

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

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

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

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

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

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

изменить: ссылка была сломана, но archive.org имеет как страницу, так и код.

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

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

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

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

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

проверить PageSpeed Google для Firefox. Он делает это, и вся нагрузка больше.

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