Инструмент очистки правил CSS - PullRequest
4 голосов
/ 13 июля 2009

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

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

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

Ответы [ 3 ]

4 голосов
/ 13 июля 2009

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

3 голосов
/ 13 июля 2009

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

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

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

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

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

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

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

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

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

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

2 голосов
/ 14 июля 2009

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

...