Форматер CSS и бьютифаер

Что делает форматер CSS?

Форматер CSS принимает код таблицы стилей в любом виде: сжатый в одну строку, с хаотичными отступами или скопированный из DevTools браузера. Он переписывает его с предсказуемой разметкой: селектор, открывающая фигурная скобка, одно объявление property: value; на строке и закрывающая скобка на отдельной строке. Правила внутри блоков @media, @supports и @container получают дополнительный уровень отступа, поэтому структура становится очевидной.

Форматирование — первый шаг, когда нужно отладить стороннюю тему, проверить CSS в pull request или разобрать стили другого сайта. Форматер работает на базе js-beautify и полностью выполняется в вашем браузере.

До и после

.btn,.btn-primary{display:inline-flex;padding:.625rem 1rem;color:#fff}@media (max-width:640px){.btn{width:100%}}

превращается в

.btn,
.btn-primary {
  display: inline-flex;
  padding: .625rem 1rem;
  color: #fff
}

@media (max-width:640px) {
  .btn {
    width: 100%
  }
}

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

SCSS, Less и современный CSS

Вложенные правила, родительские селекторы &, переменные ($brand, @brand), миксины и нативная вложенность CSS корректно выравниваются по отступам. Пользовательские свойства (--brand: #4f46e5), clamp(), :is()/:where() и слои каскада (@layer) остаются без изменений.

Полезные соглашения о стиле

• Отступ в два пробела — де-факто стандарт в большинстве гайдов по стилю CSS и значение по умолчанию в Prettier.
• Один селектор на строку в группах селекторов делает диффы меньше, когда вы добавляете или удаляете селектор.
• Пустая строка между правилами облегчает просмотр длинных файлов.
• Автоматизируйте форматирование: запускайте Prettier или Stylelint в редакторе и CI, чтобы оформление никогда не отвлекало на код-ревью.

Готовитесь к продакшену? Используйте CSS минификатор, чтобы увидеть, сколько байт вы сэкономите, или отметьте Минифицировать выше. Если заодно нужно перевести пиксели в rem, попробуйте конвертер PX в REM.

Также ищут как: css beautifier, beautify css онлайн, css prettifier, scss форматер, less форматер.

Инструменты, которые хорошо сочетаются с CSS Форматер

• HTML форматер — Вставьте минифицированную или неаккуратную разметку и получите чистый HTML с единообразными отступами, включая встроенные блоки <style> и <script>.
• JavaScript форматтер — Распакуйте и отформатируйте JavaScript, JSON или JSX с нужными отступами и стилем скобок.
• Калькулятор clamp() — Введите минимальный и максимальный размер и диапазон ширины экрана.
• Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.