Форматирование CSS онлайн
Добавьте сжатую таблицу стилей и снова читайте её без труда. Каждый селектор и каждое объявление получат свою строку, а блоки и медиазапросы будут оформлены с такими же отступами, как при написании вручную.
Почему CSS на сайте занимает одну строку
Таблицы стилей минифицируют по той же причине, что и скрипты: CSS блокирует отрисовку, поэтому каждый сэкономленный байт влияет на скорость появления страницы. cssnano, Lightning CSS и оптимизаторы в Sass и PostCSS удаляют пробелы и комментарии, сокращают цветовые значения, объединяют повторяющиеся правила и убирают последнюю точку с запятой в блоках. Утилитарные фреймворки делают результат ещё плотнее: собранная таблица Tailwind может содержать тысячи крошечных правил практически без разделителей.
Как снова разобраться в каскаде
Главная причина форматировать таблицу стилей: понять, почему правило применяется или не применяется. Когда каждый селектор находится на отдельной строке, а его объявления выделены отступом, можно проследить каскад: найти все правила для элемента, сравнить специфичность, увидеть последнее по порядку и заметить случайный important, перекрывающий вашу работу. Медиазапросы вместе с содержимым становятся заметными блоками, и поведение адаптивного интерфейса гораздо проще отследить, чем в сжатом файле.
Поддерживается современный CSS
Форматтер понимает актуальный CSS. Пользовательские свойства, выражения calc и clamp, сокращённые записи grid и flexbox, запросы контейнеров, вложенные правила, слои, блоки supports и keyframes обрабатываются корректно. Длинные списки селекторов разбиваются на строки, чтобы их было удобно читать, а сохранившиеся после сборки комментарии остаются на месте. Если обычные свойства CSS соседствуют со свойствами с префиксами браузеров, сохраняются и те и другие, меняется только оформление.
Совет для собранных CSS-фреймворков
После форматирования собранной таблицы Tailwind или Bootstrap файл быстро разрастается, десятки тысяч строк вполне обычны. Включите номера строк и используйте поиск браузера по имени класса или свойства вместо бесконечной прокрутки. Если вы хотите уменьшить размер файла, а не прочитать его, основные изменения нужно делать в настройках сборки. Неиспользуемые правила были сгенерированы ещё до запуска минификации, и простое форматирование не может удалить их за вас.
Частые вопросы
Можно ли отформатировать собранную таблицу Tailwind?
Да, это один из самых частых сценариев использования страницы. Результат будет очень длинным: фреймворк создаёт отдельное правило для каждого утилитарного класса. Для навигации удобнее включить номера строк и пользоваться поиском браузера.
Восстановятся ли комментарии?
Только те, которые сохранились в файле. Большинство минификаторов удаляет все комментарии, кроме отмеченных как юридические уведомления. Удалённое восстановить невозможно. Форматтер сохраняет оставшиеся комментарии и аккуратно размещает их в коде.
Поддерживаются ли SCSS и Less?
Страница предназначена для обычного CSS, который действительно скачивает браузер. Исходники препроцессоров с переменными, миксинами и особым синтаксисом SCSS или Less не являются целевым форматом. Стандартная вложенность CSS при этом поддерживается.