Formatter CSS

Czym jest formatowanie CSS?

Formatowanie CSS to proces dodawania spójnych wcięć, podziałów wierszy i odstępów do arkuszy stylów Cascading Style Sheets, tak aby kod był czytelny dla człowieka. Przeglądarki całkowicie ignorują białe znaki w CSS. Zminifikowany jednowierszowiec i starannie wcięty arkusz stylów dają identyczne renderowanie. Różnica tkwi w czytelności: sformatowany CSS pozwala szybko przejrzeć selektory, wychwycić brakujące średniki i zrozumieć kaskadę na pierwszy rzut oka.

Formatter CSS (zwany też beautifier CSS lub pretty-printerem) przyjmuje skompresowany lub niespójnie zapisany CSS i przepisuje go z jednolitymi wcięciami, jedną deklaracją w wierszu i spójnym rozmieszczeniem nawiasów klamrowych. To operacja odwrotna do minifikacji, zwana też upiększaniem lub formatowaniem. Minifikacja usuwa białe znaki, aby zmniejszyć rozmiar pliku na produkcji; formatowanie przywraca strukturę na potrzeby programowania, przeglądu kodu i utrzymania kodu źródłowego.

Specyfikacja CSS (W3C CSS Syntax Module Level 3) definiuje gramatykę arkuszy stylów, ale nie mówi nic o konwencjach dotyczących białych znaków. Reguły formatowania to decyzja zespołu: tabulatory czy spacje, wcięcie 2 czy 4 spacje, styl nawiasów, puste wiersze między blokami reguł. Formatter egzekwuje wybraną konwencję konsekwentnie we wszystkich plikach. Większość zespołów koduje swój wybór w pliku .prettierrc lub .editorconfig.

Dlaczego warto używać tego formattera CSS?

Wklej dowolny CSS i uzyskaj prawidłowo wcięty wynik w milisekundach. Bez instalowania wtyczek do edytora, bez plików konfiguracyjnych, bez zakładania konta.

Przypadki użycia formattera CSS

Referencja kolejności właściwości CSS

Większość formatterów CSS nie zmienia kolejności właściwości. Wiele przewodników stylu zaleca jednak grupowanie powiązanych właściwości. Poniższa tabela pokazuje powszechną konwencję grupowania stosowaną przez narzędzia takie jak wtyczka order Stylelint i CSScomb:

To grupowanie to konwencja, nie wymóg CSS. Przeglądarki stosują deklaracje na podstawie specyficzności i kolejności źródłowej, niezależnie od położenia właściwości w bloku reguły. Formatter skupia się na białych znakach i wcięciach; zmiana kolejności właściwości to odrębna kwestia lintowania obsługiwana przez narzędzia takie jak Stylelint.

Formatowanie CSS a minifikacja CSS

Formatowanie i minifikacja to operacje odwrotne, stosowane na różnych etapach programowania:

Przykłady kodu

Jak programowo formatować CSS w różnych językach i środowiskach:

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

Często zadawane pytania