Как пользоваться
- Вставьте CSS в редактор слева.
- В разделе «Отступ» выберите «2 пробела», «4 пробела» или «Табуляция».
- В разделе «Фигурные скобки» выберите «На той же строке» или «На новой строке».
Примеры
Развернуть сжатые стили карточки товара
.товар{display:grid;gap:16px;padding:24px}.товар__цена{font-size:20px;font-weight:700;color:#222}.товар {
display: grid;
gap: 16px;
padding: 24px;
}
.товар__цена {
font-size: 20px;
font-weight: 700;
color: #222;
}Оформить вложенные стили с отступом в четыре пробела
@media (min-width:768px){.каталог{display:grid;grid-template-columns:repeat(3,1fr);&:hover{background:#f5f5f5}}}@media (min-width:768px)
{
.каталог
{
display: grid;
grid-template-columns: repeat(3, 1fr);
&:hover
{
background: #f5f5f5;
}
}
}Отсортировать свойства и убрать обычные комментарии
/*! Стили магазина, лицензия MIT */
.корзина{/* Основной блок */padding:16px;color:#222;--accent:#c33;display:flex}.корзина__итог{margin-top:8px;margin:0;color:var(--accent)}/*! Стили магазина, лицензия MIT */
.корзина {
--accent: #c33;
color: #222;
display: flex;
padding: 16px;
}
.корзина__итог {
margin-top: 8px;
margin: 0;
color: var(--accent);
}Советы
- Для SCSS и LESS используйте инструмент «Форматирование кода».
- Нужен файл минимального размера? Сожмите CSS.
- Сравните «до» и «после» в инструменте «Сравнение текстов».
Частые вопросы
Почему некоторые свойства CSS не сортируются по алфавиту?
Инструмент оставляет блок в исходном порядке, если сортировка поменяла бы, какое из связанных свойств применяется, например сокращённое margin и отдельное margin-top. В этом случае под редакторами появится предупреждение.
Как найти ошибку в CSS?
При синтаксической ошибке инструмент укажет строку и столбец, подсветит строку в исходном коде и очистит результат. Исправьте указанное место, например добавьте пропущенную скобку или двоеточие.
Отправляется ли CSS на сервер?
CSS обрабатывается в браузере и не отправляется на сервер. Исходный код не сохраняется; в localStorage сохраняются только настройки инструмента.
Почему большой CSS не форматируется автоматически?
Автоматическое форматирование работает для ввода до 100 КБ. Для большего объёма появляется кнопка «Форматировать CSS»: нажмите её или используйте Ctrl+Enter либо Cmd+Enter. Файлы больше 10 МБ не принимаются, разделите такой файл на части.
Можно ли отформатировать SCSS или LESS?
Для SCSS и LESS используйте инструмент «Форматирование кода». Эта страница предназначена для обычного CSS, включая нативную вложенность и правила @media.