Як працює форматування 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 дає вам читабельну таблицю стилів без кроку збірки й без завантаження даних. Вставте мінімізований або неохайний файл, виберіть відступ і стиль дужок, потім скопіюйте або завантажте результат. Нічого не залишає ваш пристрій, акаунт не потрібен, а бібліотека завантажується лише на вимогу — тому відкриття цієї сторінки коштує кілька кілобайт, а не мегабайт.