CSS Мінімізатор і Форматувальник

Що це за інструмент?

CSS мінімізатор переписує таблицю стилів так, щоб вона була максимально компактною, не змінюючи спосіб відображення: він прибирає коментарі й пробіли, скорочує значення кольорів і нульові одиниці там, де це безпечно, об'єднує дубльовані правила та видаляє зайві крапки з комою.

Цей інструмент побудований на clean-css — CSS-оптимізаторі, який справді розбирає таблицю стилів у AST замість використання регулярних виразів, тому він безпечно обробляє граничні випадки, що ламають примітивні мінімізатори — кастомні властивості CSS (--main-color: ...), вміст усередині рядків, а також складні селектори й медіазапити виходять коректними.

Навіщо його використовувати?

• Мінімізація на основі AST (clean-css), а не регулярних виразів — безпечно працює з кастомними властивостями, рядками та вкладеними медіазапитами.
• Оптимізації рівня 2 об'єднують і спрощують правила для додаткової економії, окрім простого видалення пробілів.
• Побачите точно, скільки байтів і який відсоток ви заощадили.
• Режим форматування перетворює мінімізовану таблицю стилів назад у читабельний CSS з узгодженими відступами.
• Обробка на 100% локально — власні або ще не опубліковані стилі ніколи не покидають ваш браузер.

Як користуватися

1. Вставте свій CSS у поле введення або натисніть "Load Example", щоб спробувати приклад із кастомною властивістю та медіазапитом.
2. Натисніть "Minify", щоб стиснути його, або "Format", щоб відформатувати з відступом у 2 пробіли.
3. Перегляньте повідомлення під полями — режим мінімізації показує зменшення розміру; некоректний CSS показує зрозумілу помилку замість того, щоб мовчки видати зламаний результат.
4. Натисніть "Copy", щоб скопіювати результат.

Приклад

Введення

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Результат

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Кастомна властивість, медіазапит і порядок каскаду повністю збережені — видаляються лише пробіли, коментарі та зайві символи.

Практичні поради

• Мінімізуйте під час збірки/деплою, а не в процесі розробки — редагуйте читабельне джерело й дайте цьому інструменту (або своєму конвеєру збірки) створити версію для публікації.
• Якщо ви шукаєте причину, чому сторінка виглядає інакше в продакшені, форматування мінімізованого CSS спершу значно полегшить порівняння з вихідним кодом.
• Кастомні властивості переживають мінімізацію, тому таблиці стилів на основі дизайн-токенів (з --spacing, --color-* тощо) безпечно пропускати через цей інструмент.
• Поєднуйте з мінімізаторами HTML і JS нижче, якщо ваш проєкт зберігає все в окремих файлах перед релізом.

Де це застосовується в реальних робочих процесах

CSS — один із найвигідніших ресурсів для мінімізації, оскільки таблиці стилів за замовчуванням блокують рендеринг — кожен зекономлений байт таблиці стилів може трохи скоротити час першого відображення, особливо на повільніших з'єднаннях. Це менша перемога, ніж оптимізація зображень, але вона практично безкоштовна, щойно її вбудовано в крок збірки.

Напрямок Format корисний для протилежної задачі: вивчення мінімізованої таблиці стилів конкурента чи застарілого продакшн-коду, щоб зрозуміти її структуру перед написанням перевизначення чи редизайну.

→ Мініфікатор HTML · Мініфікатор JS

Типові випадки використання

• Стиснення таблиці стилів перед деплоєм статичного сайту чи посадкової сторінки.
• Переформатування мінімізованого CSS-файлу, взятого з живого сайту, для вивчення його структури.
• Прибирання CSS, експортованого з дизайн-інструмента, який часто містить надлишкові коментарі та пробіли.
• Швидка перевірка того, чи коректно розбирається написаний вручну фрагмент CSS, оскільки некоректний CSS проявляється як явна помилка.

Часті запитання