Очистка CSS без поломки вёрстки

Меньше CSS — тот же сайт

Удаляет дубликаты и неиспользуемые правила, корректно обрабатывает каскад, CSS-переменные и наследование — включая стили от body и предков блока.

Начать работу Попробовать API
  • Без регистрации
  • Каскад и специфичность
  • Наследование от body
3режима очистки
768тестов корректности
0внешних API
styles.css
Фрагмент CSS-файла в редакторе: правило a.fs-link со свойствами position, padding, color и transition
Фрагмент реальной таблицы стилей: каскад, var() и вложенные селекторы

Инструменты

Инструменты

Три режима под три задачи: почистить файл, вычистить мёртвое из страницы и забрать стили одного блока.

Дедупликация и очистка CSS

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

Дедупликация

Оставить только CSS, относящийся к HTML

Вставьте HTML страницы и CSS — останутся только селекторы, которые реально что-то выбирают в этой разметке.

Фильтр
рекомендуем

Экспорт стилей для блока

Три поля: HTML всей страницы, CSS всей страницы и селектор блока. Оставляем стили блока, всё внутри него, наследуемые стили предков (включая body/html) и переменные.

Экспорт блока

Почему это безопасно

Шесть вещей, за которыми следит движок

01

Каскад под защитой

Победитель объявления считается по важности, специфичности и порядку в файле. Правила отдаются в исходном порядке, поэтому перебивание равных селекторов не ломается.

02

Наследование от html и body

Цвет, шрифт, line-height, letter-spacing, visibility и SVG fill/stroke приходят от всех предков блока — текст не теряет оформление после выгрузки.

03

CSS-переменные целиком

Сохраняются и правила с var(--x), и те, что объявляют --x, транзитивно: цепочка --a: var(--b) уезжает целиком, даже если объявление живёт на другом элементе.

04

Медиа-запросы и @supports

@media, @supports, @layer, @container фильтруются рекурсивно и сохраняют обёртку. Объявление внутри @media не имеет права удалять то же свойство из базового правила.

05

Состояния не теряются

:hover, :focus, ::before, :has() статически не вычислить — поэтому они сохраняются всегда: потерять ховер хуже, чем оставить лишнее правило.

06

Отчёт, а не чёрный ящик

Сколько правил было и стало, какие селекторы удалены, какие унаследованные стили и переменные сохранены, diff удалённых строк — всё видно до копирования.

cascade.css
Тёмный экран редактора с CSS-правилами и номерами строк

Рендер-тесты, а не «на глаз»

Для каждого элемента считается победившее значение каждого свойства — до и после очистки. Если хотя бы одно значение отличается, тест падает.

  • Мёртвый селектор вычищается и из базы, и из всех медиа-блоков
  • Пустые @media и @supports удаляются целиком
  • @keyframes и @font-face остаются только при ссылке на них
  • Идемпотентность: повторный прогон ничего не меняет

Сценарии

Откуда обычно приходят на сайт

Лендинги и промо

Один экран — один файл стилей вместо 180 КБ фреймворка.

Редизайн и перенос компонента

Вытаскиваем стили виджета из старого проекта вместе с предками и переменными.

Микрофронтенды

Команда получает только свои правила — без чужих хедеров и футеров.

Аудит веса страницы

Наследие bootstrap-эпохи, дубли после джунов и «временных» правок.

CMS и конструкторы

Экспорт стилей одной страницы вместо глобального CSS сайта.

Библиотеки и UI-киты

После рефакторинга остаётся мёртвый CSS — его видно в отчёте и можно удалить.

Переезд на новый фреймворк

Переносим стили только для тех экранов, что остались на старой вёрстке. Остальное в новый проект не едет.

Разбор чужой вёрстки

Показываем, какие правила страница использует на самом деле, а какие написаны зря. Годится и для обучения, и для ревью.

Блок уезжает со своими предками

В поле цели можно вписать селектор или вставить HTML самого блока — найдём его в странице сами.

  • Селектор: .card, #main, .sidebar__item
  • Или HTML: вставляете разметку блока, получаем его стили
  • Чипы с реальными селекторами из вставленного HTML
  • Если блока нет в разметке — об этом сказано в отчёте, а не тихо вырезано
index.html
HTML-разметка страницы в редакторе кода

До и после

Типовой кейс: страница на фреймворке

Цифры усреднённые: реальная экономия зависит от разметки, но мёртвые правила есть почти в каждом проекте.

До очистки

180 KB
  • 1 240 правил, из них ~300 точных дублей
  • Мёртвые селекторы удалённых компонентов
  • Перебитые объявления, которые всё равно не применяются
  • Пустые блоки и повторяющиеся @import

После очистки

62 KB
  • 610 правил, дубликатов нет
  • Рендер каждого элемента совпадает с исходным
  • Медиа-запросы, переменные и состояния на месте
  • Отчёт показывает, что именно удалено

Как это работает

Как это работает

  1. Вставьте CSS (или HTML + CSS страницы) в поля формы.
  2. Выберите режим: дедупликация, фильтр по HTML или экспорт блока.
  3. Проверьте отчёт: что удалено, какие наследуемые стили и переменные сохранены.
  4. Скопируйте или скачайте готовый .css.

Тот же движок через JSON API

Веб-интерфейс бесплатен и без ограничений. Для автоматизации — ключ с балансом: запросы по 0.10–0.30 ₽, пополнение картой или криптовалютой.

Документация API Цены 
# экспорт одного блока по API
curl -X POST https://css-cleaner.ru/api/v1/block \
  -H "X-Api-Key: $CSSCLEANER_KEY" \
  -d html=@page.html -d css=@site.css \
  -d target=.card \
  | jq -r .css > card.css

Детали

Почему это работает правильно

Каскад и специфичность

Победитель объявления определяется по важности, специфичности и порядку; перебивающие правила сливаются безопасно.

Наследование от body

Наследуемые свойства от html, body и любого предка блока сохраняются — текст не теряет шрифт и цвет.

CSS-переменные

Правила с var() и все объявления нужных переменных сохраняются транзитивно, включая --x: var(--y).

Медиа-запросы

@media, @supports и @layer фильтруются рекурсивно и сохраняют структуру и порядок правил.

Вопросы

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

Что такое дубликаты CSS-правил и как их удалить безопасно?

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

Как инструмент понимает, какие стили реально участвуют в рендере?

Селекторы переводятся в XPath и проверяются по DOM страницы. Для каждого элемента считается победитель каскада по важности, специфичности и порядку. Объявления, которые не выигрывают ни на одном элементе, помечаются как не участвующие в рендере.

Почему важно сохранять наследуемые стили от body и предков?

Свойства color, font-family, font-size, line-height, letter-spacing, text-align, visibility, fill/stroke и custom properties наследуются. Если выгрузить только правила самого блока, текст потеряет шрифт и цвет. Инструмент добавляет правила всех предков блока, включая html и body.

Как обрабатываются CSS-переменные?

Правила, объявляющие custom properties (:root { --x: … }), и все правила, использующие var(), сохраняются, а переменные, объявленные на предках блока, подтягиваются автоматически.

Можно ли получить CSS только для одного блока страницы?

Да: вставьте HTML и CSS всей страницы и укажите селектор блока. В ответе будут правила блока, всего, что внутри него, наследуемые стили предков и переменные.

API платный?

Веб-интерфейс бесплатен и без ограничений. JSON API тарифицируется по ключу с балансом — от 0,10 ₽ за запрос, оплата картой через ЮKassa или криптовалютой.

Попробуйте на своём CSS

Файл никуда не уходит: обработка идёт на нашем сервере, ничего не сохраняется и не передаётся третьим лицам.

Экспорт блока Дедупликация