Как найти неиспользуемые CSS-переменные в коде

Вставьте CSS-текст, запустите анализ и изучите список объявлений без найденного обращения через var(). Полученный список помогает найти кандидатов для проверки, но решение об удалении нужно принимать после просмотра всего проекта.

Что проверяет анализатор CSS-переменных

Если в таблице стилей накопились пользовательские свойства, их трудно проверять вручную: часть объявлений может больше нигде не использоваться, а одинаковые имена легко пропустить при поиске по файлам. CSS Variables принимает текст CSS, распознаёт подходящие объявления пользовательских свойств и сопоставляет их с обращениями через var(). Это удобно перед рефакторингом, удалением старых правил или проверкой небольшого фрагмента стилей.

Инструмент работает с тем CSS-текстом, который вы ему передаёте. Он не оценивает итоговые значения переменных и не вычисляет, какой цвет, размер или другое свойство получится после подстановки. Его задача уже: показать распознанные объявления, посчитать обращения по именам и выделить объявления без найденного совпадения.

Как проверить CSS-текст

1. Подготовьте фрагмент CSS. Вставляйте объявления пользовательских свойств вместе с двоеточием, значением и точкой с запятой, например --brand-color: #245;. Для сопоставления обращение должно иметь вид var(--brand-color).

2. Вставьте CSS в поле ввода. Пустое значение не подходит для анализа: при пустом тексте инструмент возвращает неуспешный результат. Поэтому проверьте, что фрагмент действительно вставлен, а не остался только комментарий или пробелы.

3. Запустите обработку. Инструмент распознаёт имена, начинающиеся с двух дефисов, если дальше используются буквы, цифры, символы подчёркивания или дефисы, а затем идут двоеточие, значение и точка с запятой. Распознанное значение объявления обрезается по краям. Обращения распознаются, когда после var( указано имя пользовательского свойства; содержимое внутри скобок после имени также учитывается, поэтому запись с резервным значением может быть посчитана как обращение к этому имени.

4. Откройте успешный результат и сначала посмотрите список распознанных объявлений. Затем сверьте общее число объявлений, число объявлений без соответствующего обращения и отдельные счётчики обращений для имён. Если обработка завершилась неуспешно, проверьте входной текст и его формат; исключение во время обработки также преобразуется в неуспешный результат, а не показывается как прерванная операция.

5. Для каждого имени из списка без обращения найдите проектный контекст вручную. Перед удалением проверьте другие файлы, генерируемые стили и места, где CSS собирается или изменяется. Если переменная нужна внешнему процессу, динамической вставке или нераспознанной записи, один только этот результат не подтверждает, что объявление можно удалить.

Как читать результат и где нужны дополнительные проверки

В успешном отчёте распознанные объявления представлены вместе с общим количеством объявлений. Отдельно указывается число объявлений, для которых не найдено распознанное обращение, а для каждого имени приводится счётчик обращений. Нулевой счётчик означает отсутствие совпадения среди обращений, которые инструмент смог распознать в переданном тексте. Это полезный список кандидатов на проверку, но не автоматическое решение об удалении.

Например, в проекте есть такой фрагмент: :root { --brand-color: #245; --gap: 1rem; } .button { color: var(--brand-color, #000); }. Вставьте его и запустите анализ. В результате ожидайте список распознанных объявлений, общее количество объявлений, количество объявлений без найденного обращения и счётчики по именам. Для --brand-color обращение с резервным значением должно учитываться по имени; --gap попадёт в список без соответствующего распознанного обращения. Это форма результата, а не обещание конкретного числового отчёта для любого варианта записи.

Проверяйте вывод в пределах вставленного фрагмента. Инструмент сопоставляет распознанные имена объявлений с распознанными именами в var(), но не устанавливает полноту анализа всего проекта. Он не сообщает, что переменная действительно вычисляется браузером, не проверяет резервную логику и не выявляет все способы использования пользовательских свойств. Поэтому перед изменением кода сопоставьте список с исходными файлами, сборкой и динамически создаваемыми стилями.

Практический пример

Разработчик проверяет небольшой фрагмент стилей перед удалением старого промежутка и хочет отделить объявление без найденного обращения от используемой цветовой переменной.

Вставьте фрагмент :root { --brand-color: #245; --gap: 1rem; } .button { color: var(--brand-color, #000); } в поле CSS и запустите обработку.

Успешный отчёт со списком распознанных объявлений, общим количеством, числом объявлений без совпадения и счётчиками обращений по именам; --gap должен быть отмечен без найденного обращения, а обращение к --brand-color с резервным значением должно учитываться по имени.

Ограничения

• Результат ограничен распознанными шаблонами объявлений пользовательских свойств и обращений var() в переданном тексте; он не заменяет проверку всего проекта, вычисление значений или анализ резервной логики.

Частые ошибки

• Причина: в поле вставлен пустой текст или объявление записано без точки с запятой. Исправление: перед запуском вставьте непустой CSS-фрагмент и проверьте форму объявления пользовательского свойства.

Частые вопросы

Что произойдет, если передать пустой CSS-текст?

Пустой текст не подходит для анализа: в таком случае инструмент возвращает неуспешный результат, поэтому перед запуском убедитесь, что CSS-фрагмент вставлен в поле ввода.

Учитывается ли var() с резервным значением?

Да, обращение с резервным содержимым внутри скобок учитывается по имени переменной, если оно начинается с распознаваемого var(--имя). Инструмент считает такие обращения по имени, а не оценивает результат резервной подстановки.

Можно ли по отчёту сразу удалить найденную CSS-переменную?

Нет, такой вывод нельзя считать проверкой всего проекта. Отчёт сопоставляет только распознанные объявления и обращения в переданном тексте, поэтому динамические стили, другие файлы и записи вне поддерживаемого шаблона нужно проверить отдельно.