CSS Formatter

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

Форматирование CSS — это процесс добавления единообразных отступов, переносов строк и пробелов в таблицы стилей (Cascading Style Sheets), чтобы код был удобен для чтения людьми. Браузеры полностью игнорируют пробельные символы в CSS. Минифицированная однострочная запись и аккуратно оформленная таблица стилей дают идентичный результат отображения. Разница — в читаемости: отформатированный CSS позволяет быстро просматривать селекторы, замечать пропущенные точки с запятой и понимать каскад с первого взгляда.

CSS-форматтер (иногда называемый CSS-бьютифайером или pretty-printer) берёт сжатый или непоследовательно оформленный CSS и переписывает его с единообразными отступами, по одному объявлению на строку и согласованным расположением фигурных скобок. Это операция, обратная минификации, — также называемая «приведением в порядок» или «красивой печатью». В то время как минификация удаляет пробельные символы для уменьшения размера файла в продакшене, форматирование восстанавливает структуру для разработки, код-ревью и сопровождения кодовой базы.

Спецификация CSS (W3C CSS Syntax Module Level 3) определяет грамматику таблиц стилей, но ничего не говорит о соглашениях по пробельным символам. Правила форматирования — это командное решение: табуляция или пробелы, отступ 2 или 4 пробела, стиль скобок, пустые строки между наборами правил. Форматтер последовательно применяет выбранное соглашение ко всем файлам. Большинство команд закрепляют свой выбор в файле .prettierrc или .editorconfig.

Зачем использовать этот CSS Formatter?

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

Сценарии использования CSS Formatter

Справочник по порядку CSS-свойств

Большинство CSS-форматтеров не переупорядочивают свойства. Однако многие руководства по стилю рекомендуют группировать связанные свойства вместе. В таблице ниже показано распространённое соглашение о группировке, используемое такими инструментами, как плагин order для Stylelint и CSScomb:

Эта группировка является соглашением, а не требованием CSS. Браузеры применяют объявления на основе специфичности и порядка источника, независимо от положения свойства внутри блока правил. Форматтер сосредоточен на пробельных символах и отступах; переупорядочивание свойств — это отдельная задача линтинга, решаемая такими инструментами, как Stylelint.

Форматирование CSS vs. минификация CSS

Форматирование и минификация — обратные операции, применяемые на разных этапах разработки:

Примеры кода

Как программно форматировать CSS на разных языках и в разных средах:

import * as prettier from 'prettier'

const ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

const formatted = await prettier.format(ugly, {
  parser: 'css',
  tabWidth: 2,
  singleQuote: true,
})
// → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}\n"

import cssbeautifier

ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

opts = cssbeautifier.default_options()
opts.indent_size = 2

formatted = cssbeautifier.beautify(ugly, opts)
# → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}"

# Format a single file in place
npx prettier --write styles.css

# Format all CSS files in a directory
npx prettier --write "src/**/*.css"

# Check formatting without modifying files
npx prettier --check "src/**/*.css"

# Pipe minified CSS through stdin
echo "body{margin:0;padding:0}" | npx prettier --parser css

<?php
// composer require sabberworm/php-css-parser
require 'vendor/autoload.php';

use Sabberworm\CSS\Parser;
use Sabberworm\CSS\OutputFormat;

$input = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}';

$document = (new Parser($input))->parse();
echo $document->render(OutputFormat::createPretty());
// → body {
//     margin: 0;
//     padding: 0;
//   }
//   h1 {
//     font-size: 2rem;
//     color: #333;
//   }

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