Аудит CSS помогает оценить объём стилей, их использование и специфичность селекторов. «Неиспользуемый» в отчёте означает, что правило не применялось в проверенном состоянии страницы. Оно может понадобиться при открытии меню или изменении ширины экрана.
Выберите страницы и действия для проверки
Возьмите страницы с разными элементами интерфейса: общей шапкой, списком товаров, формой ввода. Проверьте не только начальное отображение, но и открытие меню, ошибки валидации, переключение вкладок. До и после изменения используйте одинаковую ширину экрана и одни и те же действия.
Проверьте публичную страницу в CSS Scanner Milten. Сохраните адрес таблицы стилей и найденные проблемы. Состояния, которые не охватывает сканирование, включите в ручную проверку.
Не удаляйте стили только по доле неиспользуемого CSS
Учебный пример: при загрузке страницы меню закрыто. Его стили могут не использоваться вначале, но понадобиться после открытия. Выполните нужное действие, прежде чем признавать правило лишним.
В документации Coverage Chrome DevTools описана запись использования CSS и JavaScript во время взаимодействия со страницей. Неиспользование в одной записи не доказывает, что правило не нужно всему сайту.
Для каждого кандидата на удаление найдите исходный файл или этап сборки, который создаёт этот CSS. Измените исходник, пересоберите приложение и проверьте результат вместо правки минифицированного файла.
Проверьте дубли и специфичность селекторов
Повторяющиеся объявления могут действовать при разных условиях. Проверьте медиазапросы, состояния элементов и порядок каскада. После объединения правил убедитесь, что нужные стили по-прежнему применяются к тем же элементам.
Другой учебный пример: к правилам постоянно добавляют !important, чтобы изменить цвет кнопки. Сначала разберите конфликтующие правила и их специфичность. Справка MDN о специфичности поможет выразить нужные приоритеты в исходном коде.
Проверьте внешний вид и работу после публикации
После изменения повторно просканируйте URL. Помимо размера файла проверьте кнопки, формы и раскрывающиеся меню. На мобильных устройствах и больших экранах оцените перенос текста и видимость индикатора фокуса.
Для общих значений цветов и отступов используйте Design Tokens. Если ошибка отображения связана с разметкой, обратитесь к руководству по проверке HTML.
Всегда ли удаление неиспользуемого CSS ускоряет страницу?
На скорость также влияют порядок загрузки, передача ресурсов и JavaScript. Сравните результаты Speed Scanner в одинаковых условиях, чтобы понять, что изменилось.
Достаточно ли автоматического анализа?
Нужно проверить значимые действия пользователя и разную ширину экрана. Отдельно зафиксируйте область автоматического сканирования и состояния, проверенные вручную.
Проверьте CSS публичной страницы. Сохраните исходные условия и замечания перед внесением изменений.