Softonic

Форматировщик CSS

Шаг 1 / 2
Форматировать CSS

Вы открываете продакшен-стиль в DevTools, а весь код умещается в одну строку. Этот форматировщик разворачивает минифицированный CSS в читаемый вид: одно объявление на строку, отступ в два пробела и пустая строка между правилами. Он работает с исходным CSS, выводом Sass или PostCSS и с CSS внутри встроенных блоков <style>. Вставленный CSS отправляется на наш сервер для форматирования и переносится в ссылке страницы, пока вы переходите между шагами инструмента. Блочные комментарии удаляются при форматировании.

Как отформатировать CSS

  1. 1

    Вставьте CSS

    Минифицированный в одну строку, частично отформатированный или уже аккуратный, парсеру всё равно.

  2. 2

    Отформатируйте

    Нажмите «Форматировать CSS». Каждое объявление переходит на свою строку с отступом в два пробела, а пустая строка разделяет правила.

  3. 3

    Проверьте

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

  4. 4

    Скопируйте

    Скопируйте отформатированный CSS в буфер обмена и вставьте его обратно в свой проект.

До и после

Ввод (минифицированный):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

Вывод (отформатированный):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

Что делает форматировщик

Поведение Значение
Объявления По одному на строку, с отступом в два пробела
Пустая строка между правилами 1
Открывающая скобка На той же строке, что и селектор
Закрывающая скобка На отдельной строке
Порядок свойств Сохраняется, никогда не пересортируется
Блочные комментарии Удаляются при форматировании

Что удаляет форматировщик

/* Этот комментарий исчезает при форматировании */
.button { background: #2563eb; }

Блочные комментарии (/* ... */) удаляются из вывода. Если они вам нужны, сохраните копию исходного файла перед форматированием.

Вложенные правила (Sass / современная вложенность в CSS)

Форматировщик выравнивает вложенные правила в соответствии с их глубиной:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

Синтаксис Sass/Less (без &) также допускается. Специфичные для Sass at-правила, такие как @mixin, @include и @extend, передаются без изменений, но не переформатируются глубоко. Для полного форматирования Sass используйте инструмент с поддержкой Sass, например Prettier.

Когда не стоит форматировать

  • В продакшене: минифицируйте, а не форматируйте. Отформатированный CSS в 2–3 раза больше минифицированного.
  • Перед сравнением (diff): отформатируйте обе стороны. Сравнение минифицированного файла с аккуратным даёт нечитаемый diff.
  • Внутри сборочного конвейера: пусть за единообразие отвечает Prettier или форматировщик вашего фреймворка. А этот инструмент используйте для разовой очистки.

Часто задаваемые вопросы

Он обрабатывает стандартный CSS и CSS Nesting (спецификация 2023 года). Специфичный для Sass синтаксис, такой как @mixin, @include, @extend, и переменные с $ передаются без изменений, но не переформатируются глубоко. Для полного форматирования Sass используйте инструмент с поддержкой Sass, например Prettier.

Да. Форматирование выполняется на нашем сервере, поэтому вставленный CSS отправляется с каждым запросом на форматирование и переносится в ссылке страницы, пока вы переходите между шагами инструмента. Он не сохраняется ни на одном аккаунте и не используется повторно.

Нет, если он синтаксически корректен. Пробелы в CSS не значимы вне значений, а форматировщик лишь переставляет пробелы и переносы строк. Порядок объявлений и сами значения сохраняются.

Да. Скопируйте CSS изнутри тегов <style>, вставьте его, отформатируйте и вставьте обратно. Форматировщик работает только с CSS, поэтому вставляйте содержимое CSS, а не окружающий HTML.

Форматировщик убирает блочные комментарии (/* ... */), чтобы вывод оставался единообразным. Если хотите их сохранить, сделайте копию исходного CSS перед форматированием.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.