Удаляем неиспользуемые правила CSS на всем сайте

Рано или поздно, каждый front-end (верстальщик) сталкивается с задачей, когда нужно проверить весь сайт на наличие неиспользуемых правил CSS. Первым делом на ум приходит погуглить и найти какой-то сервис или программку, которая сделает всю грязную работу за нас.
Короче попотел, и нашел такие решения:

• платный сервис unused-css.com
• DustMe Selectors — расширение FireBug для Mozilla
• CSS Usage — расширение FireBug для Mozilla

По поводу платного сервиса, Вы зайдете на сайт, введете адрес сайта для проверки и нажмете ОК. Вам напишут что результат придет на почту, в итоге через сутки придет письмо, что уже есть результат и его можно скачать по ссылке (переходите и Вам предложат внести оплату, чтобы скачать результат проверки). Но мы не ищем легких платных путей, да и хочется все уметь делать своими руками, поэтому оставим платный результат кому-то другому.
Итак начнем с того какое программное обеспечение нам понадобится. Первым делом нам понадобится Mozilla Firefox. После того как Firefox установлен, внедряем в него дополнение FireBug.
Начальные подготовления сделаны, дальше более подробно о дополнениях для сканирования CSS.

Dust Me Selectors

Дополнения Dust Me Selectors в официальном каталоге дополнений к браузеру нет, установить его можно перейдя по ссылке и нажав кнопку Install Now (естественно открывать ссылку нужно FireFox’ом). Дополнение установили, перезагрузили браузер и в правом нижнем углу у нас появится розовый значок метлы.
После того как расширение просканирует страницу откроется окошко с тремя вкладками Unused selectors (неиспользуемые правила), Used selectors (правила которые используюся) и Spider log (паук — сканирование сайта). Внизу две кнопки: сохранить документ и очистить результат сканирования.
Теперь немного подробнее о Spider log. Требуется ввести адрес сайта или адрес карты сайта и нажать кнопочку GO! По идее все понятно и все должно работать, но как ни хотел я результата, результата не получилось, точнее получалось просканировать пару страниц и дополнение висло, что очень печалило, одним словом неудача какая-то. Автор утверждает, что для работы дополнения нужна Mozilla версии 1.5 и выше (это тоже развод [хихи] я ее устанавливал, да все работает, но все равно не так как нужно). В принципе это единственный минус и самый значительный, потому что нужно было весь сайт проверить, а проверяется достаточно долго (пол дня убил в этот хлам). Самое положительное это то, что если ввести название сайта, то дополнение построит карту сайта, а она нам пригодится для следующего дополнения CSS Usage, так что обязательно сохраните карту сайта.
В принципе если Вам нужно проверить одну страничку то это расширение Вам отлично поможет, отмечу еще такой минус, что при любом открытии дополнения все время сканируется страничка, короче управление расширением не сильно удобное, поэтому я на него забил.

CSS Usage

Дополнение CSS Usage в официальном каталоге можно найти по ссылке. До недавнего времени, чтобы расширение работало, приходилось устанавливать версию Firefox 3.6.25, а на момент написания статьи Автор, как бы проснулся или очухался и обновил дополнение, поэтому можно ставить на последнюю версию Mozill’ы. После того как Вы установите это дополнение и перезагрузите браузер, смело заходите на сайт который хотите проверить и как только страничка загрузится, смело нажимайте кнопочку F12 (откроется окошко FireBug’а) и там Вы увидите вкладку CSS Usage:

Чтобы проверить страницу на наличие неиспользуемых правил нужно нажать кнопочку Scan (сканирование занимает секунд 30, а то и меньше). На первый взгляд кажется что это расширение сканирует только одну страницу, что же делать с остальными страницами спросите Вы. А помните мы сохраняли карту сайта с помощью расширения Dust Me Selectors, правда если на проверяемом сайте есть html карта сайта, то использовать лучше ее, если же ее нет то создайте новую страничку сайта и вставьте карту сайта с расширения Dust Me Selectors (если нет возможности создать новую страницу то об этом ниже).
Сейчас я опишу последовательность действий для сканирования:

1. открываем html карту сайта
2. нажимаем F12 — открывается FireBug
3. переходим на вкладку CSS Usage
4. нажимаем кнопку AutoScan
5. обновляем страницу (нажимаем F5)

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

В самом начале просканированной страницы указываются следующие обозначения:

• Line — строка правила
• CSS Selector — CSS правило
• Seen — используемое CSS правило (светло-зеленым цветом)
• Seen before — правила CSS которые использовались ранее (темно-зеленым цветом)
• Unseen — неиспользуемые CSS правила (красным цветом)
• :hover — CSS правила для элементов, которые получили фокус (серым цветом)
• (2 scans) — показывается количество сканирований (если Вы просканировали тока одну страницу то соответственно будет цифра 1)
• export cleaned css — сохранить результат сканирования

Можете дальше продолжить сканирование, правда придется возвращаться к карте сайта (первый минус). Спешить прокликивать не нужно, важно чтобы страница загрузилась полностью, работу автосканирования Вы будете видеть (то есть результат сканирования будет отображаться в окне FireBug’а).
Расширение проверяет все подключаемые файлы стилей. Если правил CSS на сайте очень много, придется прокрутить колесико, чтобы увидеть результат сканирования:

Такой результат выводится после каждого файла стилей, если их больше одного.
Когда все страницы будут просканированы кликните на ссылку export cleaned css, результат откроется в новой вкладке, выделите все и сохраните в файл с раширением .css, перед каждым неиспользуемым правилом будет указан тег UNUSED:

Второй минус такого метода сканирования это то, что данное расширение не сканирует всплывающие (модальные) окошка сайта, очень жаль, так что придется скопировать правила CSS для модальных окошек.
Несмотря на два минуса, на мой взгляд это самый крутой метод проверки файла стилей на наличие неиспользуемых правил CSS, которое на сегодняшний день существует.
Я его применял для оптимизации двух файлов стилей общим весом в 360Кб — 18000 строк, я был в шоке когда это увидел. После всех махинаций с помощью этого метода получился один файл стилей — 90Кб и 1100 строк, результатом остались все довольны, и я тоже. Правда решение искалось долго, в следующий раз все будет на много быстрее, что очень радует.
Чуть не забыл. Что делать если создать страницу с картой сайта не представляется возможным? В этом случае в адрессную строку Вам придется вставлять каждую ссылу с карты сайта ручками и все будет отлично срабатывать.
И кстати если Вы выбрали систему управления сайтом WordPress, то в этой статье вы можете узнать как для него сделать карту сайта.
Еще отмечу, что платный сервис присылает результат сканирования в течение 24 часов, а если на Вашем сайте (ресурсе) 10 или 20 шаблонов страниц, то Ваша проверка займет на много меньше времени, чем Вы потратите чтобы дождаться от них результата. Но, если на сайте огромное количество страниц и для них используются разные шаблоны, конечно целесообразно заплатить какието 25$ за такую услугу.
Надеюсь Вам окажется полезным такой метод проверки Вашего файла стилей.