CSS Formatter

Wat is CSS-opmaak?

CSS-opmaak is het proces van het toevoegen van consistente inspringing, regelafbrekingen en spatiëring aan Cascading Style Sheets, zodat de code leesbaar is voor mensen. Browsers negeren witruimte in CSS volledig. Een geminificeerde éénliner en een zorgvuldig ingesprongen stylesheet produceren identieke weergave. Het verschil is leesbaarheid: opgemaakte CSS stelt u in staat om selectors te scannen, ontbrekende puntkomma's op te sporen en de cascade in één oogopslag te begrijpen.

Een CSS-formatter (soms CSS-beautifier of pretty-printer genoemd) neemt gecomprimeerde of inconsistent opgemaakte CSS en herschrijft deze met uniforme inspringing, één declaratie per regel en consistente plaatsing van accolades. Dit is de omgekeerde bewerking van minificatie, ook wel beautification of pretty-printing genoemd. Terwijl minificatie witruimte verwijdert om de bestandsgrootte voor productie te verkleinen, herstelt opmaak de structuur voor ontwikkeling, code-review en onderhoud van de codebase.

De CSS-specificatie (W3C CSS Syntax Module Level 3) definieert de grammatica voor stylesheets, maar zegt niets over witruimteconventies. Opmaakregels zijn een teamkeuze: tabs of spaties, inspringing met 2 of 4 spaties, accoladestijl, lege regels tussen regelsets. Een formatter handhaaft welke conventie u ook kiest, consistent in elk bestand. De meeste teams leggen hun keuze vast in een .prettierrc- of .editorconfig-bestand.

Waarom deze CSS Formatter gebruiken?

Plak een willekeurige CSS en ontvang correct ingesprongen uitvoer in milliseconden. Geen editorplugins te installeren, geen configuratiebestanden te schrijven, geen account aan te maken.

Toepassingen van de CSS Formatter

Referentie voor CSS-eigenschapsvolgorde

De meeste CSS-formatters herordenen eigenschappen niet. Maar veel stijlgidsen raden aan om gerelateerde eigenschappen samen te groeperen. De onderstaande tabel toont een veelgebruikte groeperingsconventie gebruikt door hulpmiddelen zoals de Stylelint order-plugin en CSScomb:

Deze groepering is een conventie, geen CSS-vereiste. Browsers passen declaraties toe op basis van specificiteit en bronvolgorde, ongeacht de positie van de eigenschap binnen een regelblok. Een formatter richt zich op witruimte en inspringing; het herordenen van eigenschappen is een apart lintingvraagstuk dat wordt afgehandeld door hulpmiddelen zoals Stylelint.

CSS-opmaak versus CSS-minificatie

Opmaak en minificatie zijn omgekeerde bewerkingen, toegepast in verschillende fasen van de ontwikkeling:

Codevoorbeelden

CSS programmatisch formatteren in verschillende talen en omgevingen:

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

Veelgestelde vragen