CSS Biçimlendirici & Sıkıştırıcı

Doğadaki CSS, eğitimlerdeki snippet'lar kadar temiz değildir. Tipik bir prod stylesheet preprocessor (Sass, Less), build pipeline (PostCSS) ve bazen CMS'in injection'larının katmanlı çıktısıdır. Sonuç — özellikle prod için minify edildikten sonra — okunamayan, anlamlı diff'lenemeyen, DevTools'ta debug edilemeyen tek satır. Biçimlendiricinin işi onu kaynak-okunabilir CSS'e döndürmek: virgülle ayrılmış listede satır başına bir seçici, declaration'lar girintilenmiş ve satır başına bir, süslü parantezler sağda, son noktalı virgül korunur, yorumlar saklanır.

js-beautify CSS modu yapısal yeniden biçimlendirme ve süslü parantez yerleşimi etrafında bir avuç stil seçimini yapar. Yapılandırma: girinti (2/4/tab), wrap genişliği (40/80/120/yok), trailing newline. Varsayılanlar tipik prod codebase ile eşleşir: 2 boşluk girinti, 80 sütun wrap, açık trailing newline.

Sıkıştırma build-time minifier'ın yaptığı gibi: yorumları sil, tüm boşluğu tek boşluğa daralt, yapısal noktalama etrafındaki boşluğu kaldır ({ } : ; , > ~ +), her kapatma süslüsünden önceki son noktalı virgülü düşür ve tek satıra birleştir. Tasarruflar elle yazılmış CSS için %30-50, zaten minify edilmişler için %10-20 olur. Kısaltma özellikleri yeniden yazmaz (margin-top vs margin) — bu cssnano gibi araçlara bırakılır.

Biçimlendiricinin yardım ettiği yerler: Üçüncü taraf kütüphane stylesheet incelemesi, iki versiyon karşılaştırması (önce biçimlendir, sonra diff), DevTools'ta specificity sorunları debug, CSS-in-JS'e import. Sıkıştırıcının yardım ettiği yerler: Static site/landing page production deploy, e-posta şablonları (size limit'leri için kazandırır), CDN-served stylesheet'ler.

Modern özellikler: CSS değişkenleri, @media, @supports, @keyframes, container queries, cascade layers, :has(), nesting — biçimlendirici hepsini destekler. Preprocessor kaynağı (.scss, .less) işlemez — onun için Prettier Sass plugin veya stylelint kullanın.

Gizlilik aynı: yükleme yok, log yok, tarayıcıda. Network sekmesinde doğrulayın. Workflow ipucu: iki stylesheet karşılaştırırken her ikisini de aynı ayarlarla biçimlendirin sonra diff'leyin. Bu araç adjacent utiliti'lerle eşleşir: HTML Formatter, JS Formatter, Markdown ↔ HTML, Regex Tester ve daha fazlası.