Инструмент форматирования CSS

CSS Formatter упорядочивает stylesheets в единообразную и читаемую структуру. Селекторы, declarations, media queries, keyframes, переменные и output препроцессоров легче проверять, чем в минифицированном или неровно отформатированном коде. Это помогает при отладке, ревью, поддержке design system, обучении и понимании чужих стилей. Форматирование не меняет автоматически cascade, specificity, inheritance и совместимость браузеров. Небольшое правило может сильно влиять на интерфейс, если загружается поздно или использует сильный селектор. Для production нужно проверять responsive states, visual regression, lint, build output и контекст компонента. Перед релизом стоит открыть страницу и проверить реальные состояния интерфейса. Для production-данных или кодовой базы результат все равно нужно проверить parser, тестами или правилами проекта.

Форматирование CSS — это задача токенизации и форматированного вывода, а не полного разбора. Полноценный парсер CSS (CSS Syntax Module Level 3, рекомендация W3C) тяжелее, чем необходимо форматировщику: он строит AST с правилами стилей, at-правилами, объявлениями и значениями компонентов, а также разрешает граничные случаи разбора (незавершённые строки, непарные скобки, свойства с вендорными префиксами). Эта страница использует более лёгкий токенизатор, который проходит по потоку символов, распознаёт те же классы токенов (идентификатор, at-ключевое слово, хэш, строка, повреждённая строка, число, размерность, процент, url, функция, пунктуация, комментарий) и выдаёт их как плоский список, затем форматировщик собирает токены с выбранным отступом, стилем скобок и правилами пробелов. Две структурные единицы в CSS — это блоки правил (селектор { объявления }) и блоки at-правил (@media, @supports, @container, @keyframes оборачивают одно или несколько правил). Форматировщик проходит по потоку токенов и отслеживает глубину скобок: { увеличивает глубину (и следует новая строка + отступ), } уменьшает глубину (и отступ сжимается до соответствия парной {). Селекторы выводятся дословно — форматировщик не разбирает их, поскольку разбор селектора вроде .foo > .bar:hover:not(.baz) — это отдельная задача (CSS Selectors Level 4). Селекторы сохраняются побайтово, только с нормализацией пробелов (множественные пробелы сжимаются в один, завершающие пробелы удаляются), чтобы минифицированный .a,.b,.c преобразовывался в .a, .b, .c. Объявления форматируются с выбранным стилем: 'expanded' (каждое свойство на отдельной строке, наиболее читаемый), 'compact' (одно правило на строку, несколько объявлений компактно, наиболее распространён в production CSS) или 'compressed' (минифицированный, без пробелов, минимально возможный вывод). Двоеточие после имени свойства всегда сопровождается одним пробелом; значение выводится дословно, за исключением нескольких нормализаций (убираются завершающие нули из 0.500 в .5, единицы из 0px в 0 — классические приёмы минификации CSS). Минификация — это обратное направление: удаление комментариев, сжатие пробелов внутри и между объявлениями, удаление завершающей точки с запятой после последнего объявления в блоке (допустимо по CSS 2.1 §4.1.7), объединение соседних блоков правил с одинаковым селектором и медиа-контекстом, а также нормализация цветовых значений (#ffffff -> #fff, rgb(255,255,255) -> #fff, когда возможно). Современные минификаторы (cssnano, lightningcss, clean-css) также выполняют структурные оптимизации: объединение длинных свойств в сокращённые (margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px; -> margin: 1px;), удаление дублирующихся объявлений внутри правила и удаление правил, не совпадающих ни с одним элементом (div:has-no-children { color: red; } при удалении мёртвого кода). Для минифицированного вывода страница применяет стандартные преобразования; для читаемого вывода — выбранный отступ и стиль скобок. Модуль CSS Nesting (CSSWG, черновик 2023, Baseline 2024) вводит нативную вложенность: .a { color: red; & .b { color: blue; } } теперь валидный CSS в современных браузерах (Chrome 112+, Firefox 117+, Safari 16.5+). До 2024 года вложенность требовала перезаписи препроцессором (Sass & или Less & для цепочки селекторов). Страница обрабатывает оба варианта: вложенный CSS препроцессора форматируется как SCSS/Less (с сохранением &), а нативный вложенный CSS (без необходимости &) форматируется обходом блока правил. Другие at-правила, обрабатываемые страницей: @keyframes и @counter-style принимают тело из объявлений, а не вложенных блоков правил, поэтому форматируются иначе (объявления внутри at-правила, без вложенных скобок). @media, @supports, @container, @layer принимают тело из блоков правил. @import, @charset, @namespace — только верхнего уровня и выводятся на отдельной строке. @property (зарегистрированные пользовательские свойства) принимает блок объявлений. @font-face — это одиночный блок правил со сложным объявлением без селектора. Страница обрабатывает каждое правило по форме его тела, определённой спецификацией, а не по имени. Самая частая ловушка форматирования — нарушение содержимого внутри строковых литералов: content: "hello world";, font-family: "Arial Black", sans-serif;, background: url("image.png") — форматировщик не должен сжимать пробелы внутри строки, разделять URL по / и трогать текст комментария внутри /* ... */. Токенизатор, корректно отслеживающий состояние строк и комментариев — это разница между форматировщиком, сохраняющим содержимое пользователя, и тем, что его искажает. Токенизатор страницы написан вручную и достаточно компактен для визуальной проверки; production-форматировщики используют postcss или lightningcss, которые несут те же обязательства во внутренних лексерах.

• Лексический анализ (CSS Syntax Level 3): проход по потоку символов, выдача токенов ident / at-keyword / hash / string / number / dimension / percentage / url / function / punctuation / comment. Строки и комментарии имеют состояние — неправильный токенизатор ломает content: "hello world";.
• Две структурные единицы: блоки правил (селектор { объявления }) и блоки at-правил (@media, @supports, @container, @layer оборачивают блоки правил). Форматировщик отслеживает глубину скобок и делает отступ при каждом { на новый уровень; парная } уменьшает уровень.
• Селекторы выводятся дословно с нормализацией пробелов: .a,.b,.c -> .a, .b, .c. Форматировщик не разбирает селекторы (CSS Selectors Level 4 — отдельная задача) — он только очищает пробелы и запятые.
• Стили вывода: 'expanded' (одно объявление на строку, наиболее читаемый), 'compact' (одно правило на строку, распространён в production), 'compressed' (без пробелов, минифицированный). Двоеточие + пробел после имени свойства — единственное универсальное правило форматирования.
• Минификация: удаление комментариев, сжатие пробелов, удаление завершающей ;, объединение правил с одинаковым селектором, нормализация #ffffff -> #fff, 0.500 -> .5, 0px -> 0. Структурные объединения: длинные -> сокращённые (margin-top: 1px; ... margin-left: 1px; -> margin: 1px;).
• CSS Nesting (CSSWG 2023, Baseline 2024): .a { & .b { ... } } теперь нативный CSS в Chrome 112+, Firefox 117+, Safari 16.5+. Вложенность препроцессоров до 2024 (Sass &, Less) по-прежнему валидна; страница форматирует оба варианта обходом структуры блоков правил.
• Тела at-правил: @keyframes и @counter-style принимают объявления; @media / @supports / @container / @layer принимают блоки правил; @import / @charset / @namespace — инструкции верхнего уровня; @property и @font-face принимают блоки объявлений. Страница обрабатывает каждое по форме тела, определённой спецификацией, а не по имени.
• Граница безопасности: строковые литералы (content, имена шрифтов, URL) и текст комментариев не затрагиваются ни одним преобразованием. Побайтовая точность — критерий корректности CSS-форматировщика — сломайте строку content, и пользователь заметит это немедленно.