Определяем неиспользуемые 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.
{{ title }}
  • {{ m.username }}{не представился} {{m.date}}

    {{ m.text }}

    • {{ child.username }} {{child.date}}

      {{ child.text }}

Высказаться по теме

user

2017.08.20