Как найти и удалить неиспользуемые стили CSS

2016-01-05 Оптимизация RastaMan 1 491 0

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

Так как я начал замечать что css код растёт и понимал что как минимум ⅓ стилей уже не используется, начался поиск программы которая бы автоматически удалила неиспользуемые стили css, но безрезультатно. Как оказалось такого не существует, разве что различные расширения типа Dust-Me Selectors или платные сервисы.

Расширение Dust-Me для FF сначала показалось идеальным решением моей проблемы, но есть недостаток в том, что эта «метла» ищет неиспользуемые css классы только на той странице на которой я её активирую.

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

Пришёл к выводу что нужно решать проблему собственными силами, вручную, это занимает время, но чего не сделаешь ради быстродействия сайта и избавления мусора.

Ручное удаление неиспользуемых стилей css с помощью Notepad++

Итак, Notepad++ я думаю у вас имеется, начнём с резервного копирования css файла и шаблона (темы) где будет происходить чистка (файл нужен для подстраховки). Скопировать можно например с помощью FileZilla.

Теперь когда на рабочем столе есть папка с шаблоном (темой) найдите в ней тот css файл который нужно почистить. Откройте его текстовым редактором Notepad++, скопируйте класс или ID (без точки или решётки), перейдите в поиск → найти в файлах или

Ctrl

Shift

и введите в первое поле поиска это слово, с помощью поля «папка» отыщите папку с шаблоном или введите путь до него и нажмите «найти всё».

После этого редактор выдаст результат поиска где встречалось данное слово.

Как видите, этот класс нигде не подключён, редактор его нашёл только в том файле который мы редактируем. Смело удаляем неиспользуемый стиль!

А вот пример если класс подключен.

Как видите данный класс подключён в искомом шаблоне, поэтому мы его не удаляем, а двигаемся дальше не спеша шаг за шагом удаляем неиспользуемые стили css.

Горячие клавиши для быстрой оптимизации CSS

Для более быстрого поиска и удаления используйте горячие клавиши. Двойным щелчком мыши выделите класс или ID, сочетанием клавиш

Ctrl

Shift

переходите на поиск (выделенное слово уже будет скопировано) и жмите

Enter

. Таким образом очистка CSS будет происходить значительно быстрее.

Таким же образом можно работать и с такими редакторами как Sublime или Atom, сочетание клавиш одинаковое. Я и сам предпочитаю Sublime сейчас начал переходить на Atom, но именно удаление неиспользуемых css стилей удобней производить на Notepad.

Добавочные статьи из категории «Оптимизация»