Форматировщик CSS
Форматирует и приводит CSS в порядок с единообразными отступами.
Об этом инструменте
Форматирует и приводит CSS в порядок: сжатые или неаккуратные правила получают по одному объявлению в строке и единые отступы, чтобы ревью и diff читались легко. Меняются только пробелы — селекторы, значения и каскад остаются прежними.
Как пользоваться
Вставьте минифицированный или записанный в одну строку CSS, нажмите форматирование и скопируйте результат в редактор. Обратное преобразование выполняет минификатор, когда придёт время готовить production-сборку.
Пример
Пример начинается с минифицированной карточки, которой возвращают отступы.
Ввод
.card{display:flex;padding:1.5rem;border-radius:.5rem;background:#fff}.card h2{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}Вывод
.card {
display: flex;
padding: 1.5rem;
border-radius: .5rem;
background: #fff;
}
.card h2 {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 .5rem;
}Совет
Форматируйте перед код-ревью, а минифицируйте только для production-сборки.
Полезно знать
CSS beautifier отличается от CSS-форматировщика?
Нет. Это одна и та же операция — расстановка отступов и по одному объявлению в строке, — поэтому эта страница покрывает оба запроса.
Изменит ли форматирование поведение моего CSS?
Нет. Меняются только пробелы и переводы строк, каскад остаётся тем же. Строки и значения url(data:…) защищены, поэтому точка с запятой внутри них никогда не разрывает объявление.