Инструменты для нахождения неиспользуемых CSS стилей

2 октября 2009

4 из 5

Многие разработчики сталкиваются с тем, что после какого-то времени работы над проектом, в файлах CSS появляются стили, про которые нельзя точно сказать, используются они или нет. Такое часто случается, когда вы работаете в команде, и над стилями работает не один человек. Или, например, до вас было несколько разработчиков, а вы решили что-то поменять или дизайнер задумал небольшой редизайн. В общем, вариантов много, а результат один — браузеру отдаются «мертвые» селекторы.

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

Расширения для Firefox

Dust Me

Учитывает стили, включенные в страницу через <link>, @import и <?xml-stylesheet?>. Может анализировать как отдельную страницу, так и весь сайт. В конце вы получите список селекторов, которые не используются на сайте.

CSS Usage

Это расширение для FireBug, которое позволяет найти неиспользуемые селекторы как на отдельной странице, так и на всем сайте. В итого вы получите список всех ваших селекторов, среди которых отмеченные красным будут неиспользуемыми.

Веб-сервисы

CSS Checker

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

Десктопные редакторы

Перечень редакторов кода, которые так или иначе умеют находить неиспользуемые CSS стили.

TopStyle (Win)

Top Style

Этот так же умеет находить селекторы, которые используются на страницах, но для которых нет описания в CSS файлах.

IntelliJ IDEA (Win, Mac, Linux)

InetiJ IDEA

Кросс-платформенный редактор, предназначенный в первую очередь для работы с Java.

Заключение

На мой взгляд, самый удачный инструмент из перечисленных — Dust Me. Анализ всего сайта занимает меньше минуты, после чего нужно просто найти и удалить указанные селекторы.

Кстати, если у кто-то из вас пользуется редактором или сервисом, которого нет в этом списке, то пишите в комментариях, добавлю. Всем спасибо за внимание ;-)

Комментарии — 21

Спасибо за полезную статью.. буквально день назад парился этой проблемой.

Если говорить о Firefox, еще плагин Page Speed от Google (надстройка к firebug) может показывать неиспользованные селекторы. Очень нравятся в нем рекомендации-документации (англ.)

Не все стили обязательно будут присутствовать на тестируемой странице, что сводит полезность этих плагинов практически к нулю.

Octane, ты видно невнимательно читаешь статью ;-) Плагины для фаерфокса могут просматривать все страницы сайта.
Единственно, что может быть пропущено с помощью таких плагинов, это классы, которые присваиваются из js.

fail… да, не читал :-) Я как-то давно ставил Dust Me Selectors для Firefox, он такого еще не умел.

Grin, я думаю если брать плагин firefox, то он возможно ижет в коде class или id а потом смотрит что за ними и проверяет это всё на наличие в css. Поэтому, мне кажется, прочесть js для него не проблема. Хотя надо попробовать=). Спасибо, Павел, за статью

Антон, имя класса не обязательно в JavaScript может изменяться явно:

element.className = "some-class";

все варианты нереально учесть. А еще содержимое страниц может быть подгружено или создано динамически.

Одним словом - доверяй, но проверяй.

Сенкс за обзор! Может кто посоветовать как бы еще загрузить ВСЕ картинки с css файла. А так же хотелось бы выравнивать html код вложенной лесенкой. Заранее сенкс за советы...

Еще один замечательный сервис для оптимизации CSS: CleanCSS

Штука полезная, но сама не чистит, а приходится все искать в редакторе и убивать вручную

А есть инструмент, который будет не только находить не используемые СSS стили на всем проекте, но и очищать сss от них. И что делать в такой ситуации когда какие то стили задействованы только для созданого динамически html-кода, допустим джаваскриптом?

Я еще недавно открыл сервис по оптимизации CSS: здесь. Код писался с нуля, а не копировался у tidycss или подобных скриптов, которые есть в общем доступе.
Жалко, что Dust Me у меня не установился: пишет, что этот плагин не предназначен для Mozila Firefox 6.0

Ой, извиняюсь, дал адрес на синонимайзер (кстати, тоже полезная штука). Вот оптимизатор CSS: http://partnerki-runeta.ru/css-optimized/

Гораздо интересней, это не находить неиспользуемые, а фильтровать на сервере неиспользуемые стили и отдавать только те селекторы, которые необходимы. Часто случается, что есть один файл стилей, в который напиханы все стили подряд, в результате юзер носится с этим толмутом по всем страницам, из которого используется 10%

CSS-уборщики применимы для аккуратной верстки с минимальным привлечением id/class-атрибутов, договоренностью поменьше лезть скриптами к этим атрибутам, единой формой описания селекторов. И то после чистки иногда отваливаются детали стилизации. А уж когда через сайт пробежало стадо наемных буйволов html-css-js-кодинга, по просьбе владельца что-то поправив там-сям, причем каждый со своими манерами написания, никакой автоматический чистильщик не способен правильно разгрести мусор в CSS.

Кроме того, с развитием CSS все больше бизнес-логики сайта становится выгодным возложить на плечи стилизационных правил. Простой пример - Пример слайдера, управляемого только с помощью CSS3. В результате действия CSS-уборщика окажутся даже вредными, ибо часть правил связаны с сиюминутными состояниями элементов разметки.

Воспользовался расширением Dust Me. 150 страниц сайта просканировались за 10 минут. Результат оптимизации хороший. Автору спасибо за статью

Из десктопных еще Rapid CSS
Из перечисленных в статье оставил себе CSS Usage, удобный.

Думал, есть ли такое, чтоб сразу все страницы сайта проверял - оказывается есть :)

Я пользуюсь библиотекой mincss на Python для очисти CSS. Можно установить от сюда: https://github.com/peterbe/mincss
Сделал видео, как пользоваться библиотекой: https://www.youtube.com/watch?v=Vg7XvAJz7H4

Новый комментарий

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

разрешенные теги или посмотреть как будет выглядеть

Имя

Эл. почта используется для Граватарки

Сайт

Имя в Твиттере

Сообщение

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

разрешенные теги или посмотреть как будет выглядеть

Спонсоры

Последние комментарии

Мы в соцсетях

Блогорол