Форматирование CSS кода онлайн

Сжал CSS в одну строку или прислали «простыню» без отступов — ниже онлайн-форматтер. Вставил код, нажал «Форматировать», скопировал результат. Есть и минификация обратно в одну строку.

Что делает

  • Форматировать — расставляет переносы и отступы у селекторов и свойств.

  • Минифицировать — сжимает в одну строку: меньше пробелов, удобно перед вставкой в критический CSS.

  • Копировать — забирает готовый код из нижнего поля.

Когда пользуюсь

Чаще всего — когда из DevTools или из старого проекта прилетает CSS без переносов. Prettier в редакторе лучше для постоянной работы, но для разовой вставки в тикет или в статью быстрее открыть страницу и нажать кнопку.

Важно.

Это лёгкий форматтер, не полный парсер как у Stylelint/Prettier. Сложные конструкции с @container, вложенностью нативного nesting и экзотическими хаками лучше прогонять через редактор.

Пример

Было:

css
.card{display:flex;gap:12px;padding:16px}.card__title{margin:0;font-size:18px}

Стало:

css
.card {
  display: flex;
  gap: 12px;
  padding: 16px;
}

.card__title {
  margin: 0;
  font-size: 18px;
}
← К списку статей

Поделиться

Комментарии

Пока нет комментариев — можете написать первый.

Оставить комментарий

Войти с помощью

или оставьте комментарий как гость

Отправка защищена сервисом Yandex SmartCaptcha. Подробности — в политике конфиденциальности.