IZN Tools

Форматирование CSS

По одному свойству на строку, в удобном вам порядке.

ВВОД
РЕЗУЛЬТАТ
Ожидание ввода
Посчитано на вашем устройстве

Что решает форматирование

Большая часть споров о CSS — о раскладке текста: ставить ли пробел после двоеточия, писать ли единственное объявление в строку, где должна стоять закрывающая скобка. Форматтер отвечает на всё это одинаково каждый раз, то есть снимает спор, а не выигрывает его.

Чего он не сделает

  • Не переставит свойства. В CSS порядок — это смысл. margin, за которым идёт margin-top, не то же самое, что наоборот.
  • Не объединит и не удалит правила. Между двумя правилами с одним селектором может стоять третье, которое важно.
  • Ничего не переименует. Классы, кастомные свойства и значения выходят ровно такими, какими вошли.

Это задачи оптимизатора, а оптимизатору нужно понимать каскад. Форматтер, который стал бы это угадывать, время от времени ломал бы страницы.

Чтение чужих стилей

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

Вопросы

Меняет ли форматирование поведение стилей?+

Нет. Пробелы между объявлениями в CSS незначимы, ничего не переставляется и не переименовывается — селекторы, свойства и значения выходят идентичными. Меняется только раскладка текста.

Отсортирует ли он свойства по алфавиту?+

Нет, и намеренно. Порядок свойств в CSS имеет значение: сокращённая запись, за которой идёт развёрнутая, перекрывается ею, и перестановка молча меняет результат. Сортировка — задача линтера, который об этом знает, а не форматтера.

Понимает ли он SCSS и Less?+

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

А если нужно прочитать минифицированный CSS?+

Вставляйте — минифицированные стили остаются валидным CSS и вернутся читаемыми. Это самый быстрый способ разобраться в чужом файле.