CSS Biçimlendirici

CSS Biçimlendirme Nedir?

CSS biçimlendirme, kodun insanlar tarafından okunabilir olması için Cascading Style Sheets dosyalarına tutarlı girinti, satır sonları ve boşluklar ekleme sürecidir. Tarayıcılar CSS'deki boşlukları tamamen görmezden gelir. Tek satırlık küçültülmüş bir dosya ile düzgünce girintili bir stil sayfası aynı görünümü üretir. Fark okunabilirlikte yatar: biçimlendirilmiş CSS, seçicileri taramanıza, eksik noktalı virgülleri fark etmenize ve cascade yapısını bir bakışta anlamanıza olanak tanır.

CSS biçimlendirici (bazen CSS güzelleştirici veya pretty-printer olarak da adlandırılır), sıkıştırılmış ya da tutarsız biçimlendirilmiş CSS'yi alarak düzgün girinti, satır başına tek bildirim ve tutarlı parantez yerleşimiyle yeniden yazar. Bu işlem, küçültmenin tersine beautification veya pretty-printing olarak da adlandırılır. Küçültme üretim için dosya boyutunu azaltmak amacıyla boşlukları kaldırırken biçimlendirme, geliştirme, kod incelemesi ve kod tabanı bakımı için yapıyı yeniden oluşturur.

CSS spesifikasyonu (W3C CSS Syntax Module Level 3) stil sayfalarının dilbilgisini tanımlar ancak boşluk kuralları hakkında hiçbir şey söylemez. Biçimlendirme kuralları ekip kararıdır: sekme mi boşluk mu, 2 boşluk mu 4 boşluk mu, parantez stili, kural kümeleri arasında boş satır. Biçimlendirici seçtiğiniz kuralı her dosyada tutarlı biçimde uygular. Çoğu ekip tercihini .prettierrc veya .editorconfig dosyasında belgeler.

Bu CSS Biçimlendiriciyi Neden Kullanmalısınız?

Herhangi bir CSS yapıştırın ve milisaniyeler içinde düzgünce girintili çıktı alın. Kurulacak editör eklentisi yok, yazılacak yapılandırma dosyası yok, oluşturulacak hesap yok.

CSS Biçimlendirici Kullanım Senaryoları

CSS Özellik Sıralama Referansı

Çoğu CSS biçimlendirici özellikleri yeniden sıralamaz. Ancak pek çok stil kılavuzu ilgili özelliklerin bir arada gruplanmasını önerir. Aşağıdaki tablo, Stylelint'in order eklentisi ve CSScomb gibi araçlar tarafından kullanılan yaygın bir gruplama kuralını gösterir:

Bu gruplama bir kural değil, bir kuraldır. Tarayıcılar bildirimleri, kural bloğu içindeki özellik konumuna bakılmaksızın özgüllük ve kaynak sırasına göre uygular. Biçimlendirici boşluk ve girintiye odaklanır; özellik yeniden sıralama, Stylelint gibi araçların ele aldığı ayrı bir linting konusudur.

CSS Biçimlendirme ve CSS Küçültme Karşılaştırması

Biçimlendirme ve küçültme, geliştirmenin farklı aşamalarında uygulanan ters işlemlerdir:

Kod Örnekleri

Farklı dil ve ortamlarda CSS'yi programatik olarak nasıl biçimlendireceğiniz:

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

Sıkça Sorulan Sorular