CSS Formatter

Що таке форматування CSS?

Форматування CSS — це процес додавання послідовних відступів, розривів рядків і пробілів до таблиць стилів, щоб код був зручним для читання людиною. Браузери повністю ігнорують пробіли в CSS. Мінімізований однорядковий запис і акуратно відформатована таблиця стилів дають ідентичний результат рендерингу. Різниця полягає у читабельності: відформатований CSS дозволяє швидко переглядати селектори, помічати відсутні крапки з комою та розуміти каскад з першого погляду.

CSS formatter (який також називають CSS beautifier або pretty-printer) бере стиснутий або непослідовно оформлений CSS і переписує його з однорідними відступами, одним оголошенням на рядок і послідовним розміщенням фігурних дужок. Це зворотна операція до мінімізації — її також називають beautification або pretty-printing. Якщо мінімізація видаляє пробіли для зменшення розміру файлу в продакшені, то форматування відновлює структуру для розробки, перегляду коду та підтримки кодової бази.

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

Навіщо використовувати цей CSS Formatter?

Вставте будь-який CSS і отримайте правильно відформатований результат за мілісекунди. Жодних плагінів для редактора, жодних конфігураційних файлів, жодних облікових записів.

Випадки використання CSS Formatter

Довідник порядку CSS-властивостей

Більшість CSS formatter-ів не змінюють порядок властивостей. Але багато посібників зі стилю рекомендують групувати пов'язані властивості разом. У таблиці нижче показана поширена угода про групування, яку використовують такі інструменти, як плагін order для Stylelint та CSScomb:

Це угода, а не вимога CSS. Браузери застосовують оголошення на основі специфічності та порядку в коді, незалежно від позиції властивості всередині блоку правила. Formatter зосереджується на пробілах і відступах; переупорядкування властивостей — це окрема задача лінтингу, яку вирішують такі інструменти, як Stylelint.

CSS-форматування проти 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;
//   }

Часті запитання