CSS Formatter

Was ist CSS-Formatierung?

CSS-Formatierung ist der Prozess, konsistente Einrückungen, Zeilenumbrüche und Abstände zu Cascading Style Sheets hinzuzufügen, damit der Code für Menschen lesbar ist. Browser ignorieren Whitespace in CSS vollständig. Ein minimierter Einzeiler und ein sauber eingerücktes Stylesheet erzeugen identisches Rendering. Der Unterschied liegt in der Lesbarkeit: Formatiertes CSS ermöglicht es dir, Selektoren zu überblicken, fehlende Semikolons zu erkennen und die Kaskade auf einen Blick zu verstehen.

Ein CSS-Formatter (manchmal auch CSS-Beautifier oder Pretty-Printer genannt) nimmt komprimiertes oder inkonsistent gestaltetes CSS und schreibt es mit einheitlicher Einrückung, einer Deklaration pro Zeile und konsistenter Klammerplatzierung um. Das ist die umgekehrte Operation der Minifizierung, auch Beautification oder Pretty-Printing genannt. Während die Minifizierung Whitespace entfernt, um die Dateigröße für die Produktion zu reduzieren, stellt die Formatierung die Struktur für die Entwicklung, Code-Reviews und die Codebase-Pflege wieder her.

Die CSS-Spezifikation (W3C CSS Syntax Module Level 3) definiert die Grammatik für Stylesheets, enthält jedoch keine Vorgaben zu Whitespace-Konventionen. Formatierungsregeln sind eine Teamentscheidung: Tabs vs. Leerzeichen, 2-fache vs. 4-fache Einrückung, Klammerstil, Leerzeilen zwischen Regelmengen. Ein Formatter setzt die gewählte Konvention konsistent in jeder Datei durch. Die meisten Teams legen ihre Wahl in einer .prettierrc- oder .editorconfig-Datei fest.

Warum diesen CSS-Formatter verwenden?

Füge beliebiges CSS ein und erhalte korrekt eingerückten Output in Millisekunden. Keine Editor-Plugins zu installieren, keine Konfigurationsdateien zu schreiben, keine Konten zu erstellen.

Anwendungsfälle für den CSS-Formatter

CSS-Property-Reihenfolge Referenz

Die meisten CSS-Formatter ordnen Properties nicht neu an. Viele Style-Guides empfehlen jedoch, verwandte Properties zu gruppieren. Die folgende Tabelle zeigt eine gängige Gruppierungskonvention, die von Werkzeugen wie dem Stylelint-Order-Plugin und CSScomb verwendet wird:

Diese Gruppierung ist eine Konvention, keine CSS-Anforderung. Browser wenden Deklarationen basierend auf Spezifität und Quellreihenfolge an, unabhängig von der Property-Position innerhalb eines Regelblocks. Ein Formatter konzentriert sich auf Whitespace und Einrückung; die Neuanordnung von Properties ist ein separates Linting-Thema, das von Werkzeugen wie Stylelint behandelt wird.

CSS-Formatierung vs. CSS-Minifizierung

Formatierung und Minifizierung sind inverse Operationen, die in verschiedenen Entwicklungsphasen angewendet werden:

Code-Beispiele

So formatierst du CSS programmatisch in verschiedenen Sprachen und Umgebungen:

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

Häufig gestellte Fragen