CSS Formatter

Vad är CSS-formatering?

CSS-formatering är processen att lägga till konsekvent indragning, radbrytningar och avstånd i Cascading Style Sheets så att koden blir läsbar för människor. Webbläsare ignorerar helt whitespace i CSS. En minifierad enliner och ett snyggt indragat stilark ger identisk rendering. Skillnaden är läsbarhet: formaterad CSS låter dig skanna selektorer, upptäcka saknade semikolon och förstå kaskaden med en blick.

En CSS formatter (ibland kallad CSS beautifier eller pretty-printer) tar komprimerad eller inkonsekvent formaterad CSS och skriver om den med enhetlig indragning, en deklaration per rad och konsekvent placering av klammerparenteser. Detta är den omvända operationen jämfört med minifiering, även kallad beautification eller pretty-printing. Medan minifiering tar bort whitespace för att minska filstorleken för produktion, återställer formatering strukturen för utveckling, kodgranskning och underhåll av kodbas.

CSS-specifikationen (W3C CSS Syntax Module Level 3) definierar grammatiken för stilark men säger inget om whitespace-konventioner. Formateringsregler är ett teambeslut: tabbar kontra mellanslag, 2-stegs kontra 4-stegs indragning, klammerformat, tomma rader mellan regelblock. En formatter tillämpar vilken konvention du än väljer, konsekvent i varje fil. De flesta team dokumenterar sitt val i en .prettierrc- eller .editorconfig-fil.

Varför använda denna CSS formatter?

Klistra in valfri CSS och få korrekt indragen utdata på millisekunder. Inga editorplugins att installera, inga konfigurationsfiler att skriva, inga konton att skapa.

Användningsfall för CSS formatter

Referens för ordning av CSS-egenskaper

De flesta CSS formatters ordnar inte om egenskaper. Men många stilguider rekommenderar att gruppera relaterade egenskaper tillsammans. Tabellen nedan visar en vanlig grupperingskonvention som används av verktyg som Stylelints order-plugin och CSScomb:

Denna gruppering är en konvention, inte ett CSS-krav. Webbläsare tillämpar deklarationer baserat på specificitet och källordning, oavsett egenskapens position inom ett regelblock. En formatter fokuserar på whitespace och indragning; omordning av egenskaper är en separat linting-fråga som hanteras av verktyg som Stylelint.

CSS-formatering vs. CSS-minifiering

Formatering och minifiering är omvända operationer som tillämpas i olika stadier av utvecklingen:

Kodexempel

Hur man formaterar CSS programmatiskt i olika språk och miljöer:

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

Vanliga frågor