Определяем неиспользуемые CSS-селекторы.

В чём, собственно, проблема?

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

Решение

Существует несколько решений проблемы. Я опишу здесь наиболее популярные:

• Dust-Me Selectors: Dust-Me Selectors - это расширение для FireFox (версии 1.5 и выше), которое определяет неиспользуемые селекторы CSS, которое работает по следующему принципу. Извлекаются все селекторы из всех стилевых файлов просматриваемой страницы, затем анализируется какие из них не используются. Затем данные сохраняются и при тестировании (просмотре) дочерних страниц дополняются.
• CSS Redundancy Checker: Бесплатный он-лайн сервис. С его помощью вы можете найти все селекторы, которые не используются вашей страницей.
• Unused CSS Cleaner: Этот инструмент поможет вам найти неиспользуемые стили CSS (селекторы и классы), которые присутствуют в файле стилей, но не используются на страницах.
• IntelliJ IDEA - HTML/XHTML/CSS Editor: Валидация CSS "на лету".
• Style Studio CSS Editor: Платный редактор CSS. Подсвечивает неиспользуемые стили.
• Expression Web's CSS Reports: Есть возможность вывести в качестве отчёта неиспользуемые стили.

Несколько дополнительных ссылок

• Identify unused CSS: Небольшой PHP-скрипт, использующий регулярные выражения для проверки стилей на странице.
• Playing with CSS selectors: Страничка, на которой можно поэкспериментировать с селекторами CSS.