CSS Formatter

Apa itu CSS Formatting?

CSS formatting adalah proses menambahkan indentasi, pemisah baris, dan spasi yang konsisten ke Cascading Style Sheets agar kode mudah dibaca oleh manusia. Browser sepenuhnya mengabaikan whitespace dalam CSS. CSS satu baris yang diminifikasi dan stylesheet yang diindentasi dengan rapi menghasilkan tampilan yang identik. Perbedaannya adalah keterbacaan: CSS yang terformat memungkinkan Anda memindai selector, menemukan tanda titik koma yang hilang, dan memahami cascade secara sekilas.

CSS formatter (terkadang disebut CSS beautifier atau pretty-printer) mengambil CSS yang terkompresi atau bergaya tidak konsisten, lalu menulis ulang dengan indentasi seragam, satu deklarasi per baris, dan penempatan kurung kurawal yang konsisten. Ini adalah operasi kebalikan dari minifikasi, yang juga disebut beautification atau pretty-printing. Sementara minifikasi menghapus whitespace untuk mengurangi ukuran file di produksi, formatting memulihkan struktur untuk pengembangan, tinjauan kode, dan pemeliharaan codebase.

Spesifikasi CSS (W3C CSS Syntax Module Level 3) mendefinisikan tata bahasa untuk stylesheet, tetapi tidak menyebutkan konvensi whitespace. Aturan formatting adalah keputusan tim: tab vs. spasi, indentasi 2 spasi vs. 4 spasi, gaya kurung kurawal, baris kosong antar kumpulan aturan. Sebuah formatter menerapkan konvensi apa pun yang Anda pilih, secara konsisten di setiap file. Kebanyakan tim mengkodifikasi pilihan mereka dalam file .prettierrc atau .editorconfig.

Mengapa Menggunakan CSS Formatter Ini?

Tempelkan CSS apa pun dan dapatkan keluaran yang diindentasi dengan benar dalam hitungan milidetik. Tidak perlu memasang plugin editor, menulis file konfigurasi, atau membuat akun.

Kasus Penggunaan CSS Formatter

Referensi Urutan Properti CSS

Sebagian besar CSS formatter tidak mengurutkan ulang properti. Namun banyak panduan gaya menyarankan untuk mengelompokkan properti yang berkaitan. Tabel di bawah ini menunjukkan konvensi pengelompokan umum yang digunakan oleh alat seperti plugin order Stylelint dan CSScomb:

Pengelompokan ini adalah konvensi, bukan persyaratan CSS. Browser menerapkan deklarasi berdasarkan spesifisitas dan urutan sumber, terlepas dari posisi properti dalam blok aturan. Sebuah formatter berfokus pada whitespace dan indentasi; pengurutan ulang properti adalah perhatian linting terpisah yang ditangani oleh alat seperti Stylelint.

CSS Formatting vs. CSS Minification

Formatting dan minifikasi adalah operasi yang berlawanan, diterapkan pada tahap pengembangan yang berbeda:

Contoh Kode

Cara memformat CSS secara terprogram dalam berbagai bahasa dan lingkungan:

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

Pertanyaan yang Sering Diajukan