CSS Formatter

Co je formátování CSS?

Formátování CSS je proces přidávání konzistentního odsazení, zalomení řádků a mezer do kaskádových stylů tak, aby byl kód čitelný pro lidi. Prohlížeče bílé znaky v CSS zcela ignorují. Minifikovaný jednořádkový soubor a pečlivě odsazený stylesheet produkují identické vykreslení. Rozdíl je v čitelnosti: formátované CSS vám umožňuje přehlédnout selektory, odhalit chybějící středníky a porozumět kaskádě na první pohled.

CSS formatter (někdy nazývaný CSS beautifier nebo pretty-printer) vezme komprimované nebo nekonzistentně napsané CSS a přepíše ho s rovnoměrným odsazením, jednou deklarací na řádek a konzistentním umístěním složených závorek. Jde o opačnou operaci minifikace, nazývanou také zkrášlování nebo pretty-printing. Zatímco minifikace odstraňuje bílé znaky za účelem zmenšení velikosti souboru pro produkci, formátování obnovuje strukturu pro vývoj, revizi kódu a údržbu kódové základny.

Specifikace CSS (W3C CSS Syntax Module Level 3) definuje gramatiku pro stylesheety, ale nic neříká o konvencích bílých znaků. Pravidla formátování jsou rozhodnutím týmu: tabulátory versus mezery, odsazení 2 nebo 4 mezerami, styl složených závorek, prázdné řádky mezi bloky pravidel. Formatter vynucuje zvolenou konvenci konzistentně napříč všemi soubory. Většina týmů svou volbu kodifikuje v souboru .prettierrc nebo .editorconfig.

Proč použít tento CSS Formatter?

Vložte libovolné CSS a získejte správně odsazený výstup během milisekund. Žádné pluginy do editoru k instalaci, žádné konfigurační soubory k psaní, žádné účty k vytvoření.

Případy použití CSS Formatteru

Referenční tabulka pořadí CSS vlastností

Většina CSS formatterů vlastnosti nepřeřazuje. Mnoho style guides však doporučuje seskupovat příbuzné vlastnosti dohromady. Tabulka níže ukazuje běžnou konvenci seskupení používanou nástroji jako plugin order pro Stylelint a CSScomb:

Toto seskupení je konvencí, nikoliv požadavkem CSS. Prohlížeče aplikují deklarace na základě specifičnosti a pořadí v kódu, bez ohledu na pořadí vlastností uvnitř bloku pravidla. Formatter se zaměřuje na bílé znaky a odsazení; přeřazování vlastností je samostatnou záležitostí lintování řešenou nástroji jako Stylelint.

Formátování CSS vs. minifikace CSS

Formátování a minifikace jsou inverzní operace, aplikované v různých fázích vývoje:

Příklady kódu

Jak programově formátovat CSS v různých jazycích a prostředích:

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;
//   }

Nejčastější dotazy