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

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

Лишняя пешка

Здравствуйте, уважаемые читатели!

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

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

Дополнениями для Firefox весьма удобно пользоваться. Например, расширение «Dust Me» способно проанализировать, как весь сайт, так и отдельную страницу. Также это расширение учитывает стили, которые были подключены к странице через < link >, @import и < ?xml-stylesheet? >. В результате проверки, дополнение выведет список неиспользуемых селекторов.

Dust Me

Также можно использовать дополнение «CSS Usage» к замечательному расширению «FireBug», которое тоже ищет «мёртвые стили» и на странице и на сайте целиком, а потом выводит список всех селекторов, подсвечивая неиспользуемые красным цветом.

CSS Usage

Помимо этого, существует множество веб-сервисов, которые в том или ином виде помогут очистить Ваш CSS-файл. Ещё можно использовать редакторы кода, например, «TopStyle» для Windows и кросс-платформенный «IntelliJ IDEA».

Внимание! Информация в статье по большей части устарела. Ссылки на инструменты удалены. Пользуйтесь современными средствами.

Дискуссия по теме