Как работает форматирование CSS
Форматтер читает таблицу стилей посимвольно, отслеживает глубину вложенности каждого блока и переформатирует её с единообразными отступами. Он никогда не меняет то, что делают стили — только то, как они выглядят в файле.
- Токенизация. Библиотека сканирует входные данные в поток токенов: селекторы, имена свойств, значения, at-правила, комментарии и скобки, двоеточия, точки с запятой, которые их разделяют. Строки и значения url() распознаются как единые целые, поэтому скобка внутри свойства content никогда не будет принята за разделитель блока.
- Отслеживание вложенности. Проходя по потоку токенов, форматтер поддерживает текущий уровень отступа. Каждая открывающая скобка увеличивает уровень — будь то блок правил, медиа-запрос или блок keyframes — а каждая закрывающая уменьшает его. Эта глубина определяет, сколько единиц отступа стоит перед каждой возвращаемой строкой.
- Применение настроек. Ваш выбор отступа (2 пробела, 4 пробела или табуляция) задаёт ширину одного уровня. Параметр стиля скобок определяет, будет ли открывающая скобка примыкать к предшествующему селектору или переходить на собственную строку. Остальные переключатели добавляют пустую строку между блоками правил и разбивают сгруппированные селекторы на отдельные строки.
- Вывод. Наконец форматтер выводит токены обратно с вычисленными отступами и переносами строк, размещая одно объявление на строку и один пробел после каждого двоеточия. Результат — та же таблица стилей, оформленная так, чтобы человек мог просматривать каскад.
Зачем форматировать CSS
- Читать минифицированные таблицы стилей. Продакшн-CSS поставляется в одну строку без пробелов между правилами. Форматирование восстанавливает переносы строк и отступы, так что вы можете найти селектор за ошибкой вёрстки и увидеть точно, какие объявления он устанавливает, даже без source map.
- Приводить в порядок непоследовательные файлы. Таблица стилей, которую редактировали несколько человек, постепенно приобретает смешанные отступы и разные стили скобок. Один проход через форматтер нормализует весь файл до единого оформления, так что следующий diff покажет реальные изменения каскада, а не пробельный шум.
- Этот инструмент не нагружает вашу страницу. Большинство онлайн-форматтеров загружают всю библиотеку при открытии страницы. Этот загружает js-beautify лениво — только когда вы нажимаете «Форматировать» или включаете живой режим, — поэтому открытие страницы стоит несколько килобайт вместо нескольких сотен, а начальный рендеринг остаётся быстрым.
- Ничего не покидает ваш браузер. Форматтер работает полностью на вашем устройстве. Ваш CSS никогда не загружается на сервер — это важно, когда проверяемая таблица стилей принадлежит клиенту, содержит внутренние имена классов или подпадает под соглашение о конфиденциальности.
Типичные применения
Форматирование CSS используется всякий раз, когда нужно прочитать таблицу стилей, написанную не для чтения.
- Отладка в продакшне: вставьте минифицированную таблицу стилей из вкладки Network, чтобы найти правило, переопределяющее ожидаемую вёрстку.
- Подготовка к код-ревью: переформатируйте файл соавтора с непоследовательными отступами перед открытием pull request, чтобы ревьюеры видели изменения каскада, а не пробельный шум.
- Обучение и аудит: разверните таблицу стилей фреймворка или библиотеки компонентов, чтобы изучить структуру её селекторов, медиа-запросов и кастомных свойств.
Практический пример
Возьмём минифицированную однострочку: a{color:red;margin:0}b{padding:0}. Вставьте её выше с отступом 2 пробела и стилем скобок «Свернуть», затем нажмите «Форматировать». Вы получите читаемые блоки: a { на отдельной строке, объявления color: red; и margin: 0; с отступом на один уровень, закрывающая скобка выровнена под селектором, правило b следует ниже. Переключите стиль скобок на «Развернуть» — и каждая открывающая скобка перейдёт на собственную строку. Измените отступ на «Табуляция» — и каждый уровень сместится с двух пробелов на символ табуляции. Стили идентичны; меняется только оформление.
FAQ
Это работает в моём браузере?
Да. Библиотека js-beautify загружается лениво при первом нажатии «Форматировать» или включении живого режима, а затем кэшируется. Ваш CSS никогда не покидает страницу — нет серверного запроса и нет загрузки данных.
Форматирование — то же самое, что разминификация?
Оно восстанавливает читаемое оформление — отступы, переносы строк и пробелы — но не может вернуть комментарии, удалённые минификацией, или восстановить структуру, которой никогда не было в файле. Оно только переформатирует объявления и селекторы, которые есть в наличии.
Изменит ли форматирование рендеринг моих стилей?
Нет. Форматирование только добавляет и убирает пробелы и переносы строк; каскад не затрагивается и страница рендерится идентично. Порядок свойств, специфичность и значения остаются в точности такими, какими вы их написали.
Что означают варианты стиля скобок?
«Свернуть» оставляет открывающую скобку на той же строке, что и селектор (a {), — это общепринятое соглашение CSS. «Развернуть» переносит каждую открывающую скобку на собственную строку под селектором. Переключатели пустых строк и «один селектор на строку» управляют интервалами между правилами и тем, как сгруппированные селекторы вроде h1, h2, h3 разбиваются по строкам.
Браузерное форматирование CSS даёт вам читаемую таблицу стилей без шага сборки и без загрузки данных. Вставьте минифицированный или небрежный файл, выберите отступ и стиль скобок, затем скопируйте или скачайте результат. Ничего не покидает ваше устройство, аккаунт не нужен, а библиотека загружается только по запросу — так что открытие этой страницы стоит несколько килобайт, а не мегабайт.