Инструмент очистки правил CSS

Question

У нас есть несколько огромных файлов CSS, которые с годами продолжали расти всякий раз, когда в нашу систему добавлялись новые элементы, а также страницы JSP (которые также включают в себя другие страницы JSP и т. д.), которые ссылаются на эти файлы.

Мы знаем, что у нас есть много правил, которые больше не используются, и многие из них являются излишними.

Новые инструменты продолжают появляться.Существует ли инструмент (помимо очевидных инструментов, таких как Aptana и валидатор CSS W3C), который может анализировать каталог и помогать в очистке и оптимизации правил CSS?

Answer 1

Это непростая задача...особенно если ваш HTML-контент DOM каким-либо образом генерируется «на лету».

Плагин Dust-Me-Selectors полезен, но на каждой странице многие селекторы будут не использоваться...но не обязательно быть недействительным.

Есть несколько приемов, которые я использовал, чтобы помочь в уборке.

Один за другим вставляйте какой-нибудь УЖАСНЫЙ стиль, который вы сможете сразу заметить, чтобы определить, используется ли селектор.например

border:6px dashed #ffaacc;
padding:12px;

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

(если ваш CSS-код «сгенерирован», вы можете оптимизировать его для одновременного тестирования с различными цветами И использовать сгенерированный контент для добавления «id» селектора)

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

#selector_a > .foo{
  ...
  background-image:url('selectortest/id_123.png');
}
#selector_b .bar{
  ...
  background-image:url('selectortest/id_124.png');
}

Затем вы просто некоторое время просматриваете свой сайт/приложение, а затем проверяете свой веб-журнал на наличие HTTP-запросов изображений...для любого сгенерированного URL-адреса изображения, который не был запрошен в журнале...вы, вероятно, нашли «мертвый» селектор.

Answer 2

Есть Селекторы для пыли плагин для Firefox, хотя и просматривает страницу, отрисованную в браузере, конечно, а не через каталог.

Answer 3

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