Проверяем CSS на лишние селекторы

Онлайн инструмент проанализирует какие CSS селекторы используются, а какие можно безопасно удалить. Загрузите ваш HTML, CSS и JavaScript код в соответствующие поля, результат будет быстро предоставлен.
Загрузите ваш HTML, CSS и JavaScript код из внешних файлов или добавьте в соответствующие поля. Загружаемый CSS код, должен быть форматированным, для точности анализа - Форматировать CSS.

Загрузка файлов

Файл не выбран
Файл не выбран
Файл не выбран

HTML Код HTML

0 символов

CSS Код CSS

0 символов

JavaScript Код JS

0 символов

Как работает анализ

Извлечение селекторов из HTML

Инструмент анализирует HTML код и извлекает:

  • Классы (class="my-class") → .my-class
  • ID (id="my-id") → #my-id
  • Теги (<div>, <p>, и т.д.)
  • Атрибуты data-* → [data-attribute]

Извлечение селекторов из JavaScript

Анализирует JS код для поиска динамического использования:

 // Эти вызовы будут распознаны:
 document.querySelector('.my-class');
 document.getElementById('my-id');
 element.classList.add('new-class');
 // И работа с CSS переменными:
 element.style.setProperty('--my-var', 'red');

Анализ CSS переменных (Custom Properties)

Особое внимание уделяется CSS переменным:

 /* Объявление переменных */
 :root {
   --primary-color: #3498db;
   --spacing: 1rem;
 }
 /* Использование переменных */
 .button {
   background: var(--primary-color);
   padding: var(--spacing);
 }

Детальный разбор возможностей

Тип селектора Как распознаётся Пример Статус
Простой класс class="my-class" .my-class { } Полная поддержка
ID селектор id="my-id" #my-id { } Полная поддержка
Теги <div>, <p>, etc div { } Основные теги
Вложенные селекторы .parent .child .parent .child { } Частичная
Псевдоклассы :hover, :focus a:hover { } Ограниченная
Атрибутные селекторы [data-test], input[type="text"] [data-test] { } Базовые
CSS переменные --my-var var(--my-var) Полная поддержка
Медиа-запросы @media (max-width: 768px) @media { .class { } } Сохраняются

Ограничения и предостережения

Неформатированный CSS

Форматируйте свой CSS перед добавлением.

Динамически генерируемые селекторы

Если селектор генерируется динамически в JavaScript, он не будет распознан:

// НЕ БУДЕТ распознано:
 const className = 'dynamic-' + Math.random();
 element.className = className;

Внешние скрипты и iframe

Селекторы, используемые во внешних скриптах или внутри iframe, не анализируются.

Сторонние библиотеки

CSS классы, которые добавляются сторонними библиотеками (jQuery UI, Bootstrap JS компоненты), могут быть пропущены.

Серверный рендеринг

Классы, добавляемые на сервере (SSR), не будут обнаружены в предоставленном HTML.

Часто задаваемые вопросы (FAQ)

Почему некоторые используемые правила помечены как неиспользуемые?

Это может происходить по нескольким причинам:

  • Селектор используется динамически в JavaScript
  • Сложный селектор с псевдоклассами или комбинаторами
  • Селектор используется во внешнем файле
  • Ошибка в регулярных выражениях анализатора

Решение: Всегда проверяйте такие правила вручную.

Инструмент сохраняет медиа-запросы целиком, даже если внутри есть неиспользуемые правила. Это сделано намеренно, так как:

  • Медиа-запросы могут активироваться при определенных условиях
  • Удаление отдельных правил из @media может нарушить структуру
  • Лучше удалять весь медиа-запрос, если он точно не нужен

Блок :root { } (или :host { }) сохраняется, если:

  • Хотя бы одна переменная из блока используется
  • Или сам селектор :root/:host используется в коде

Если в блоке есть неиспользуемые переменные, они остаются в блоке. Вы можете вручную удалить их позже.

  1. Объедините все CSS файлы в один (скопируйте содержимое друг за другом)
  2. Сделайте то же самое с JS файлами
  3. Для HTML - используйте основной файл или объедините несколько
  4. Альтернативно, загружайте файлы по одному и копируйте результаты

Ещё инструменты

CSS в :root
Песочница CSS псевдоклассов

Версия: 20.01.26 | Просмотров: 77