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

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

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

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


eclipse html css jsp aptana
person Christopher Tokar    schedule 13.07.2009    source источник
comment
Кто-нибудь использовал средство проверки избыточности CSS? Есть ли подобные инструменты?   -  person Christopher Tokar    schedule 13.07.2009

Ответы (3)


arrow_upward
3
arrow_downward

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

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

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

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

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-адреса изображения, который не был запрошен в журнале... вы, вероятно, нашли "мертвый" селектор.

person scunliffe    schedule 13.07.2009
comment
Я предполагаю, что автор искал автоматизированные инструменты, а не ручные решения. - person montrealist; 13.07.2009
comment
Dust-Me-Selectors поддерживает набор неиспользуемых селекторов, но вам нужно зайти на каждую страницу. Кроме того, если на вашем сайте есть карта сайта, вы можете использовать ее для сканирования всего сайта. - person mxmissile; 13.07.2009
comment
@dalbaeb - согласен, просто решить головоломку сложнее, чем многие ожидают. ;-) @mxmissile - хм, не знал, что у него есть работающий агрегат - мне придется посетить его повторно. - person scunliffe; 13.07.2009
comment
Dust-Me-Selectors кажется лучшим доступным инструментом, главным образом потому, что он улавливает стили, применяемые к динамически генерируемым элементам DOM. Он довольно хорошо сужает неиспользуемые стили при щелчке по приложению и просмотре всех возможных сценариев. - person Christopher Tokar; 14.07.2009

arrow_upward
4
arrow_downward

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

person montrealist    schedule 13.07.2009

arrow_upward
2
arrow_downward

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

person Rich Seller    schedule 13.07.2009