С этим инструментом что-то не так?

О «Форматирование CSS Онлайн»

Этот инструмент превращает минифицированный/грязный CSS в читаемый, аккуратно отформатированный код. Каждое объявление — отдельной строкой, нормализованы пробелы вокруг скобок и двоеточий, опционально упорядочены свойства.

Полезно для разбора минифицированного prod-CSS, подготовки к ревью и стандартизации перед коммитом.

Поддерживает вложенные селекторы, media-queries, @keyframes, кастомные свойства, CSS layers. Алфавитная сортировка свойств удобна для diff, но не всегда самая «читабельная».

Как пользоваться этим инструментом

Как красиво отформатировать минифицированный или грязный CSS

  1. Вставьте CSS

    Минифицированный или с кривыми отступами CSS — в поле "CSS". Принимаются как целые stylesheets, так и фрагменты; комментарии, media-queries и вложенные at-rules проходят без потерь.

  2. Запуск

    Результат: единственное поле `formatted` — по одному объявлению на строку, два пробела отступа внутри фигурных скобок, пустая строка между top-level правилами. Селекторы остаются однострочными; очень длинные не переносятся.

  3. Чего не делает

    Не разворачивает vendor-prefix, не превращает shorthand в longhand, не autoprefix, не переписывает значения. `margin:0 5px` останется `margin: 0 5px;`, а не 4 отдельных свойства top/right/bottom/left.

  4. Когда обратно сжать

    Форматируете для ревью, перед деплоем гоните через css-minifier-online. Round-trip держится для валидного CSS — невалидный получает best-effort и может позже распарситься иначе.