Форматирование CSS

Что такое Форматирование CSS?

Инструмент превращает минифицированные или неряшливые таблицы стилей в читаемый CSS с помощью Prettier: каждое правило и объявление на своей строке, нормализованные пробелы вокруг двоеточий и селекторов, вложенные @-правила с отступами.

Как пользоваться Форматирование CSS

1. Вставьте CSS в поле ввода или нажмите Загрузить пример.
2. Выберите Отступ.
3. Нажмите Форматировать (результат также обновляется по мере ввода).
4. Скопируйте или скачайте отформатированный CSS.

Пример

a{color:red;margin:0 auto}

a {
  color: red;
  margin: 0 auto;
}

Когда использовать Форматирование CSS

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

Как работает Форматирование CSS

Таблица стилей разбирается парсером Prettier на основе PostCSS и печатается по правилам Prettier для CSS: после каждого двоеточия ставится пробел, каждое объявление заканчивается точкой с запятой, а селекторы в списке идут на отдельных строках. Незакрытые блоки и другие синтаксические ошибки сообщаются со строкой и столбцом.

Распространенные Случаи Использования

• ✓ Разворачивание минифицированного CSS для отладки боевого сайта
• ✓ Нормализация оформления перед код-ревью
• ✓ Форматирование фрагментов CSS для постов в блоге
• ✓ Наведение порядка в CSS, экспортированном из дизайн-инструментов

Часто Задаваемые Вопросы

Что сделать дальше

Другие категории