Форматирование CSS
Форматируйте или сжимайте CSS одним кликом с поддержкой алфавитной сортировки свойств. Совместим с @media, @keyframes и всеми стандартными at-правилами.
Этот инструмент решил вашу проблему?
Часто задаваемые вопросы
Что делает форматирование CSS?
Форматирование CSS берет сжатый или непоследовательно написанный CSS и переформатирует его: каждое объявление на отдельной строке, правильные отступы внутри блоков правил и пустые строки между правилами для удобства чтения. Это чисто косметическое изменение — отображаемые стили идентичны.
Что такое сортировка свойств и зачем она нужна?
Сортировка свойств переупорядочивает объявления в алфавитном порядке (A→Z) внутри каждого блока правил. Отсортированный CSS легче просматривать для поиска определенных свойств, а также помогает избежать дублирования. Руководства по стилю, такие как алфавитный порядок, помогают командам поддерживать единообразие кода.
Влияет ли сжатие CSS на внешний вид страницы?
Нет. Сжатие CSS удаляет пробелы, комментарии и последнюю точку с запятой в блоках правил — все это семантически незначимо. Браузеры одинаково интерпретируют сжатый и отформатированный CSS. Сжатый CSS обычно на 20–40% меньше отформатированного.
Поддерживаются ли @media-запросы и @keyframes?
Да. At-правила, такие как @media, @keyframes, @supports и @font-face, распознаются, и их внутренние блоки правильно форматируются с отступами. @import и @charset (не имеющие блока) форматируются как однострочные инструкции.
Может ли он обработать SCSS или Less?
Форматировщик обрабатывает стандартный синтаксис CSS и корректно обработает валидные CSS-части файлов SCSS/Less. Специфические функции SCSS, такие как переменные ($var), вложенность и миксины (@mixin), могут быть отформатированы некорректно, поскольку они не являются стандартным синтаксисом CSS.
Как автоматически форматировать CSS в проекте?
Используйте Prettier с конфигурацией .prettierrc или Stylelint с пресетом stylelint-config-prettier. Для проектов Tailwind CSS плагин Tailwind Prettier может сортировать утилитарные классы. Встроенный форматировщик CSS в VS Code (Shift+Alt+F) также подходит для быстрого локального форматирования.