Pemformat & Perapih CSS Gratis
Format, perindah, dan minifikasi CSS. Sesuaikan indentasi, aktifkan satu properti per baris dan urut alfabet, dan bandingkan ukuran sebelum/sesudah. Unduh CSS yang diformat sebagai file.
Apa itu pemformatan CSS?
Formatter CSS (juga disebut "beautifier" atau "pretty-printer") mengambil CSS dalam bentuk apa pun: keluaran produksi yang diminifikasi, snippet satu baris yang ditempel dari inspector browser, stylesheet yang ditulis tangan dengan indentasi tidak konsisten: dan memancarkan ulang dengan indentasi konvensional, jeda baris, dan format selektor dan deklarasi yang konsisten. Parser CSS browser mengabaikan spasi pada waktu parse, sehingga halaman yang dirender terlihat identik terlepas dari bagaimana sumbernya disusun. Intinya murni keterbacaan manusia: hierarki yang diindentasi membuat penyarangan @media terlihat, satu-properti-per-baris memungkinkan mata Anda memindai deklarasi aturan dengan cepat, dan format yang konsisten di seluruh basis kode membuat tinjauan diff lebih cepat. Empat alur kerja dunia nyata: (1) men-debug CSS produksi yang diminifikasi yang ditempel dari Inspector DevTools untuk mencari tahu mengapa aturan tidak cocok; (2) memformat ulang CSS yang diekstraksi dari panel "Computed" browser untuk membandingkan dengan sumbernya; (3) menormalkan perbedaan format tim setelah merge dari kontributor yang menggunakan konvensi berbeda; (4) menyiapkan CSS untuk tinjauan kode ketika sumber telah memburuk menjadi one-liner yang ringkas.
Formatter CSS Utama
js-beautify (Einar Lielmanis, 2007 dan seterusnya) adalah formatter ekosistem JavaScript yang sudah lama berdiri: bagian CSS adalah yang menggerakkan wajah publik beautifier.io dan secara historis mendukung puluhan situs "format CSS online". Prettier (James Long, Januari 2017; dukungan CSS ditambahkan di v1.4 pada 3 Juni 2017) adalah formatter berpendapat yang datang untuk mendominasi ekosistem frontend modern. Filosofi desain Prettier adalah "hampir tanpa konfigurasi": satu gaya indent (default 2 spasi), satu target lebar baris, pembungkusan yang dapat diprediksi. Itu adalah formatter default untuk CSS di VS Code ketika ekstensi Prettier dipasang. Stylelint (David Clark + Maxime Thirouin, 2015) lebih merupakan linter daripada formatter tetapi mendukung format-on-save melalui flag --fix dan merupakan pilihan de facto untuk menegakkan konvensi CSS di seluruh tim: 100+ aturan built-in-nya mencakup segala hal dari "tidak ada selektor duplikat" hingga "lebih suka hex daripada rgb()" hingga "hanya tanda kutip tunggal". clean-css (Jakub Pawlowicz, 2011) terutama meminifikasi tetapi memiliki mode "beautify" yang membalik operasinya. Keempat akhirnya mengurai CSS melalui PostCSS (Andrey Sitnik, dimulai 7 September 2013): parser CSS universal yang menggerakkan sebagian besar ekosistem CSS modern (Autoprefixer, cssnano, pemrosesan Tailwind). Untuk proyek modern pada 2026, Prettier-on-save adalah default; alat dalam-browser ini untuk kasus satu-kali di luar konteks proyek apa pun.
Konvensi Indentasi dan Selektor
Konvensi CSS pada 2026 condong kuat ke indentasi 2-spasi: default di Prettier, sumber Tailwind, Code Guide Bootstrap, Google CSS Style Guide, dan sebagian besar paket CSS yang diterbitkan npm. Konvensi 4-spasi yang lebih lama bertahan di beberapa basis kode lawas. Tab langka dalam CSS secara khusus (lebih umum di JS/TS). Untuk selektor: daftar selektor yang dipisahkan koma secara konvensional satu-per-baris (.btn,<br>.btn-primary,<br>.btn-secondary {), membuatnya mudah untuk menambah atau menghapus selektor tanpa mengalir-ulang baris. Combinator (>, +, ~) biasanya memiliki spasi di setiap sisi. Rantai pseudo-class (:hover:focus) tetap rapat. Selektor universal (*) dan combinator descendant (spasi implisit) netral-formatter.
Format Deklarasi
Satu deklarasi per baris adalah default modern: color: red; di barisnya sendiri, padding: 10px; di baris berikutnya. Alternatif "compact" (beberapa deklarasi pada satu baris) jarang dalam CSS produksi hari ini; sebagian besar tim telah pindah ke satu-per-baris untuk keterbacaan dan diff yang bersih. Spasi tunggal setelah titik dua: color: red; bukan color:red;. Titik koma trailing pada deklarasi terakhir: secara teknis opsional dalam spesifikasi CSS, tetapi setiap formatter modern menyertakannya untuk diff-friendliness: menambahkan properti baru tidak memerlukan modifikasi baris sebelumnya. Baris kosong antara aturan: opsional dan bergantung pada tim. Prettier mempertahankan baris kosong dari input alih-alih menegakkan gaya tertentu. Pengutipan properti: nama font dengan spasi memerlukan kutipan (font-family: "Helvetica Neue", sans-serif;); URL secara konvensional dikutip (url("image.png")) meskipun yang tidak dikutip valid. Normalisasi nilai: keyword huruf kecil (RED → red), hex shorthand (#FFFFFF → #fff), pengupasan zero-unit (0px → 0): sebagian besar dari ini termasuk dalam minifier daripada formatter, tetapi beberapa formatter menerapkan yang lossless.
Kasus CSS Khusus
@media query menyarangkan aturan mereka dengan satu level indent ekstra, membuat struktur kondisional terlihat secara visual jelas. @keyframes blok berisi aturan persentase (0% { ... }, 100% { ... }) yang menyarang dengan cara yang sama. @font-face deklarasi memiliki beberapa pasangan src/format yang manfaat dari satu per baris. Properti custom CSS (--brand-color: #3b82f6;) diformat seperti deklarasi lainnya, tetapi nama properti mempertahankan kapital (nama properti custom case-sensitive, tidak seperti properti standar). Ekspresi calc() memerlukan spasi di sekitar operator: calc(100% - 20px) benar, calc(100%-20px) adalah CSS yang tidak valid. Formatter mempertahankan spasi yang diperlukan di dalam calc() sambil menormalkan konteks sekitarnya. CSS Nesting (CSS Nesting Module Level 1, baseline 2023+): fitur yang relatif baru yang memungkinkan aturan bersarang menarik di bawah induknya: telah mengubah cara formatter menangani sintaks bersarang; Prettier dan Stylelint modern keduanya memahami sintaks asli.
Mengurutkan Properti: Konvensi yang Mengejutkan Diperdebatkan
Beberapa tim menegakkan urutan properti dalam setiap aturan. Tiga konvensi bersaing. Alfabetis (toggle "Sort properties" alat ini): paling sederhana, mudah ditegakkan secara mekanis, membuat "apakah properti X sudah dideklarasikan di sini?" sebagai pemindaian cepat. Google CSS Style Guide merekomendasikan alfabetis dengan konsesi untuk prefiks vendor. Berdasarkan konsep (positioning → box model → typography → visual → animation): mengelompokkan properti terkait bersama-sama. Buku arsitektur SMACSS mempopulerkan pendekatan ini. Berdasarkan tipe (display dulu, lalu box model, lalu text, lalu misc): varian dari "berdasarkan konsep" dengan pengelompokan yang lebih kaku. Aturan order/properties-order Stylelint mendukung salah satu dari ini melalui konfigurasi. Tidak ada dari tiga yang meningkatkan rendering; pilihannya murni tentang model mental mana yang Anda anggap lebih mudah saat memindai aturan. Alat ini menawarkan pengurutan alfabetis sebagai toggle opt-in; untuk konvensi lain Anda akan memerlukan file konfigurasi Stylelint dalam proyek nyata.
Pipeline CSS Modern
Untuk proyek dengan pipeline build, default 2026 adalah Prettier berjalan saat menyimpan di editor Anda dan Stylelint pada setiap commit melalui Husky + lint-staged. VS Code mengirim Prettier sebagai formatter default untuk file CSS, SCSS, LESS ketika ekstensi dipasang. Hook pre-commit melalui Husky menjalankan Stylelint dan Prettier pada file yang di-stage sebelum mengizinkan commit. Pemeriksaan CI menjalankan stylelint --check dan prettier --check pada pull request. Setelah memformat dalam pengembangan, CSS produksi melewati cssnano (berbasis PostCSS, standar minifikasi modern) yang membalikkan semua yang dilakukan formatter untuk menghasilkan byte yang dikompresi untuk pengiriman. Tidak ada ini yang penting untuk snippet satu-kali yang ditempel dari tempat lain: itulah persis untuk apa alat dalam-browser ini dibuat. Untuk pekerjaan proyek jangka panjang, atur Prettier + Stylelint secara lokal; alat dalam-browser adalah opsi bebas-friksi untuk yang lainnya.
Kasus penggunaan umum
- Tinjauan kode · buat CSS Anda lebih mudah dibaca sebelum dibagikan dengan tim Anda.
- Debugging · CSS yang diformat dengan baik memudahkan menemukan dan memperbaiki masalah gaya.
- Refactoring · pahami struktur CSS dengan lebih baik berkat indentasi dan organisasi yang jelas.
- Pembersihan inspector browser. Tombol "Salin aturan" di DevTools menghasilkan CSS yang ringkas, sulit dibaca; format sebelum menempel ke stylesheet Anda.
- Minifikasi produksi. Toggle "Mode minifikasi" membalikkan format: berguna untuk men-deploy CSS ke produksi di mana setiap byte penting.
- Standardisasi tim. Cocokkan konvensi format tim sebelum mengirimkan PR.
Privasi: Mengapa Hanya-Browser Penting di Sini
CSS jarang berisi rahasia eksplisit, tetapi stylesheet proprietary mengungkapkan informasi tentang taksonomi kelas internal situs, token sistem desain, hipotesis A/B-test yang dikodekan dalam nama selektor, dan fitur yang belum dirilis. Formatter sisi server mengunggah CSS Anda ke layanan pihak ketiga di mana ia berada di log. Alat ini berjalan sepenuhnya di browser Anda melalui JavaScript: verifikasi di tab Network DevTools saat Anda mengklik Format, atau bawa halaman offline (mode pesawat) setelah dimuat dan formatter masih berfungsi. Aman untuk stylesheet proprietary, file sumber-kebenaran sistem desain, varian A/B-test, atau CSS apa pun yang tidak ingin Anda salin ke hard drive orang asing.
Pertanyaan umum
Apa itu perindahan CSS?
Perindahan CSS memformat ulang kode Anda untuk membuatnya lebih mudah dibaca dengan menambahkan indentasi yang benar dan jeda baris. Ini kebalikan dari minifikasi dan sangat memudahkan debugging.
Kapan menggunakan CSS yang diminifikasi?
CSS yang diminifikasi menghapus semua spasi dan paling cocok untuk produksi guna mengurangi ukuran dan bandwidth. Gunakan CSS yang diperindah dalam pengembangan untuk memudahkan debugging. Banyak alat build secara otomatis melakukan minifikasi saat deployment.
Apa kegunaan pengurutan alfabet properti?
Opsi ini mengurutkan properti CSS secara alfabet dalam setiap aturan (mis. border sebelum color sebelum display). Beberapa developer lebih menyukai pendekatan ini untuk memudahkan penelusuran, meskipun tidak memengaruhi rendering CSS.
Apa yang dilakukan "satu properti per baris"?
Ini menempatkan setiap deklarasi pada barisnya sendiri: color: red; pada satu baris, padding: 10px; pada baris berikutnya, daripada mengemasnya ke satu baris. Default modern di hampir semua CSS produksi, karena membuat diff lebih bersih (menambahkan properti = menambahkan baris, bukan memodifikasi satu) dan membuat setiap deklarasi lebih mudah dibaca secara individual. Kebalikannya: beberapa deklarasi per baris: jarang dalam kode produksi 2026 di luar snippet aturan tunggal yang sangat ringkas.
Haruskah saya menggunakan ini jika proyek saya sudah menggunakan Prettier atau Stylelint?
Mungkin tidak: integrasi Prettier editor Anda melakukan ini saat menyimpan, dengan kesadaran AST CSS penuh melalui PostCSS, dan Stylelint menegakkan konvensi tim pada setiap commit. Alat ini untuk kasus yang tidak dicakup oleh pipeline build Anda: CSS yang ditempel dari inspector browser, snippet dari email atau Stack Overflow, format satu-kali di luar konteks proyek apa pun. Untuk pekerjaan proyek jangka panjang, atur Prettier + Stylelint secara lokal; untuk pekerjaan satu-kali bebas-friksi, alat ini adalah bentuk yang tepat.
Apakah file CSS saya diunggah?
Tidak. Pemformatan berjalan sepenuhnya di browser Anda melalui JavaScript. CSS yang Anda tempel tidak pernah melintasi jaringan: verifikasi di tab Network DevTools saat Anda mengklik Format, atau bawa halaman offline (mode pesawat) setelah dimuat dan alat masih berfungsi. Aman untuk stylesheet proprietary, file sumber-kebenaran sistem desain, varian A/B-test atau CSS apa pun yang tidak ingin Anda salin ke hard drive orang asing.