Определяем неиспользуемые 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.
