CSS Beautifier

CSS Beautifier переформатирует минифицированные, сжатые или неравномерно отформатированные таблицы стилей в чистый, читаемый CSS — единообразные отступы, отсортированные свойства и понятные интервалы между правилами — чтобы вы могли действительно читать, просматривать и редактировать код. Вставьте минифицированную таблицу стилей, собранный файл CSS или неаккуратный написанный вручную CSS и мгновенно получите отформатированный вывод.

• •Отступы: 2 пробела, 4 пробела или табуляция, применяются через настоящий движок форматирования js-beautify
• •Сортировка свойств: расположение объявлений в алфавитном порядке внутри каждого блока правил для единообразного, легко просматриваемого стиля
• •Сортировка медиазапросов: упорядочивание блоков @media верхнего уровня по контрольной точке — по возрастанию для min-width и по убыванию для max-width
• •Интервалы между правилами: добавление пустой строки между правилами для визуального разделения или сохранение компактного вывода
• •Сохранение комментариев: сохранять или удалять комментарии /* ... */ при форматировании
• •Нормализация цвета: сокращение 6-значных hex-цветов и значений rgb() до 3-значной hex-сокращённой формы, где это допускают каналы

• •Чтение минифицированной production-таблицы стилей для отладки проблемы с версткой в DevTools браузера
• •Переформатирование CSS, вставленного из чата, PDF или письма, потерявшего исходные отступы
• •Стандартизация порядка свойств и отступов перед код-ревью
• •Приведение собранной или сгенерированной таблицы стилей — из CSS-in-JS сборки или вывода препроцессора — к виду, достаточному для аудита
• •Очистка CSS, экспортированного из инструмента дизайна, перед коммитом

1. 1.Вставьте ваш CSS в редактор ввода или загрузите файл .css
2. 2.Выберите отступы — 2 пробела, 4 пробела или табуляцию
3. 3.Включите сохранение комментариев, сортировку свойств, сортировку медиазапросов, интервалы между правилами и нормализацию цвета при необходимости
4. 4.Отформатированный вывод появляется автоматически по мере ввода
5. 5.Скопируйте результат или скачайте его как файл .css

• •Сортировка свойств в алфавитном порядке может разделить логически связанные объявления, например margin и margin-top — просмотрите отсортированный вывод, прежде чем принимать его как строгое правило стиля
• •Свойства с вендорными префиксами (-webkit-, -moz-) сортируются вместе с их аналогами без префикса, что может поставить резервный вариант с префиксом после стандартного свойства
• •Проверка скобок отмечает несоответствующие { и } по мере ввода, но это эвристическое сканирование, а не полноценный парсер CSS — оно не может выявить все виды недопустимого синтаксиса

• •Это инструмент форматирования, а не линтер — он не обнаружит недопустимые имена свойств, пробелы в совместимости браузеров или конфликты специфичности селекторов
• •Очень большие таблицы стилей (сборки в несколько МБ) могут медленно форматироваться в браузере — форматировщик, интегрированный со сборочным инструментом (Prettier, Stylelint --fix), лучше подходит для масштабного форматирования кодовой базы
• •Для соблюдения единообразного стиля CSS в команде специализированный инструмент вроде Stylelint или Prettier, интегрированный в редактор/CI, подходит больше, чем разовое форматирование в браузере

Если у вас есть читаемый CSS, который нужно сжать для production — уменьшив размер файла и время загрузки страницы — используйте вместо этого CSS Minifier. Он схлопывает пробелы, сокращает цвета и может удалять избыточные нули для максимального сжатия.