CSS Formatter & Beautifier

Apa fungsi CSS formatter?

CSS formatter menerima kode stylesheet dalam bentuk apa pun, misalnya yang di-minify menjadi satu baris, indentasinya berantakan, atau disalin dari DevTools browser. Lalu formatter menulis ulangnya dengan tata letak yang konsisten: selector, kurung kurawal pembuka, satu deklarasi property: value; per baris, dan kurung kurawal penutup di barisnya sendiri. Aturan di dalam blok @media, @supports, dan @container mendapat indentasi tambahan agar strukturnya jelas.

Merapikan kode adalah langkah pertama saat kamu perlu men-debug tema pihak ketiga, meninjau CSS di pull request, atau belajar dari gaya situs lain. Formatter ini didukung js-beautify dan berjalan sepenuhnya di browser kamu.

Sebelum dan sesudah

.btn,.btn-primary{display:inline-flex;padding:.625rem 1rem;color:#fff}@media (max-width:640px){.btn{width:100%}}

menjadi

.btn,
.btn-primary {
  display: inline-flex;
  padding: .625rem 1rem;
  color: #fff
}

@media (max-width:640px) {
  .btn {
    width: 100%
  }
}

Perlu diketahui, formatter tidak menambah atau menghapus titik koma, tidak mengurutkan ulang properti, dan tidak mengubah nilai. Formatter hanya mengubah spasi dan baris baru, jadi hasilnya berperilaku persis sama dengan input.

SCSS, Less, dan CSS modern

Aturan bersarang, selector induk &, variabel ($brand, @brand), mixin, dan CSS nesting native semuanya diindentasi dengan benar. Custom property (--brand: #4f46e5), clamp(), :is()/:where(), dan cascade layer (@layer) tetap dibiarkan apa adanya.

Konvensi gaya yang layak diterapkan

• Indentasi dua spasi adalah standar de facto di sebagian besar panduan gaya CSS dan default Prettier.
• Satu selector per baris dalam selector berkelompok membuat diff lebih kecil saat kamu menambah atau menghapus selector.
• Baris kosong di antara aturan mempermudah membaca file yang panjang.
• Buat pemformatan berjalan otomatis: jalankan Prettier atau Stylelint di editor dan CI, supaya urusan format tidak pernah muncul di code review.

Mau dirilis ke production? Gunakan CSS Minifier untuk melihat berapa byte yang bisa dihemat, atau centang Minify di atas. Kalau sekalian ingin mengonversi nilai piksel, coba konverter PX ke REM.

Juga dicari sebagai: css beautifier, css prettifier, format css, rapikan css, pretty print css, unminify css, scss formatter, less formatter.

Tool yang cocok dipakai bersama CSS Formatter

• Formatter HTML — Tempel markup yang berantakan atau sudah di-minify, lalu dapatkan HTML rapi dengan indentasi konsisten — termasuk blok <style> dan <script> di dalamnya.
• Formatter JavaScript — Rapikan dan beri indentasi JavaScript, JSON atau JSX sesuai preferensimu, dengan gaya kurung kurawal pilihanmu, atau hapus spasi dan komentar dengan minifier yang sudah terverifikasi.
• Kalkulator clamp() — Masukkan ukuran minimum dan maksimum serta rentang viewport, lalu dapatkan nilai clamp() yang ramah zoom dengan penjelasan perhitungannya, pratinjau langsung, dan skala tipografi atau spasi fluid yang lengkap.
• Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.