Рефакторинг больших / старых файлов CSS


13

В настоящее время я работаю над веб-сайтом на 100 000 страниц, текущий дизайн разрабатывался более 5 лет, и в результате последовательных обновлений было создано более 12 000 строк CSS-файлов.

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

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

Итак, три вопроса, есть ли инструменты для ...

  • дедупликация больших файлов CSS?
  • сканировать сайт и регистрировать CSS класс и ID использовать?
  • может ли такое сканирование быть выполнено с помощью какого-то сценария, может быть, greasemonkey?

Ответы:


17

http://unused-css.com/ Делает что-то из того, что вы спрашиваете, и у них есть это, чтобы сказать: -

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

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

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.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.