Cara kerja pengindahan CSS
Pemerelah membaca stylesheet Anda karakter demi karakter, melacak seberapa dalam setiap blok bersarang, dan memancarkanya kembali dengan spasi yang konsisten. Ia tidak pernah mengubah apa yang dilakukan oleh gaya — hanya bagaimana tampilannya dalam file.
- Tokenisasi. Pustaka memindai input Anda menjadi aliran token: selektor, nama properti, nilai, at-rules, komentar, dan kurung kurawal, titik dua, dan titik koma yang memisahkannya. String dan nilai url() dikenali sebagai unit tunggal, sehingga kurung kurawal di dalam properti content tidak pernah tertukar dengan pemisah blok.
- Lacak sarang. Saat menelusuri aliran token, pemerelah menyimpan level indentasi yang berjalan. Setiap kurung kurawal pembuka memperdalam level — baik milik blok aturan, media query, maupun blok keyframes — dan setiap yang menutup mengembalikannya. Kedalaman itu menentukan berapa banyak unit indentasi yang berada di depan setiap baris yang Anda terima kembali.
- Terapkan pilihan Anda. Pilihan indentasi Anda (2 spasi, 4 spasi, atau tab) menetapkan lebar satu level. Pengaturan brace-style menentukan apakah brace pembuka menempel pada selektor sebelumnya atau jatuh ke barisnya sendiri. Toggle lainnya menambahkan baris kosong antara blok aturan dan memisahkan selektor yang dikelompokkan ke baris terpisah.
- Pancarkan ulang. Akhirnya pemformat mencetak token kembali dengan indentasi dan jeda baris yang telah dihitung, meletakkan satu deklarasi per baris dan satu spasi setelah setiap titik dua. Hasilnya adalah stylesheet yang sama, ditata agar manusia bisa memindai cascadenya.
Mengapa memperindah CSS
- Baca stylesheet yang diminify. CSS produksi dikirim dalam satu baris tanpa jarak antara aturan. Pengindahan memulihkan jeda baris dan indentasi sehingga Anda bisa menemukan selektor di balik bug tata letak dan melihat tepatnya deklarasi mana yang ditetapkannya, bahkan tanpa source map.
- Rapikan file yang tidak konsisten. Stylesheet yang disentuh banyak orang melayang ke indentasi dan gaya brace yang campur aduk. Satu kali melewati pemerelah menormalkan seluruh file ke satu tata letak, yang membuat diff berikutnya menampilkan perubahan cascade nyata alih-alih noise spasi.
- Alat ini tidak membebani halaman Anda. Kebanyakan pemformat online memuat seluruh pustaka begitu Anda membuka halaman. Alat ini lazy-load js-beautify hanya saat Anda mengklik Cantikkan atau mengaktifkan mode langsung, jadi membuka halaman hanya memerlukan beberapa kilobyte alih-alih beberapa ratus, dan render awal tetap cepat.
- Tidak ada yang meninggalkan peramban Anda. Pemerelah berjalan sepenuhnya di perangkat Anda. CSS Anda tidak pernah diunggah ke server, yang penting ketika stylesheet yang Anda periksa milik klien, berisi nama kelas internal, atau berada di bawah perjanjian kerahasiaan.
Aplikasi umum
Pengindahan CSS muncul setiap kali seseorang perlu membaca stylesheet yang tidak ditulis untuk dibaca.
- Debug produksi: tempel stylesheet yang diminify yang diambil dari tab Network untuk menemukan aturan yang menimpa tata letak yang Anda harapkan.
- Persiapan code review: format ulang stylesheet kontributor yang tidak konsisten sebelum membuka pull request agar reviewer melihat perubahan cascade, bukan kekacauan tata letak.
- Pembelajaran dan audit: perluas stylesheet framework atau pustaka komponen untuk mempelajari bagaimana selektor, media query, dan properti kustom disusun.
Contoh yang dikerjakan
Ambil satu baris yang diminify: a{color:red;margin:0}b{padding:0}. Tempel di atas dengan indentasi diatur ke 2 spasi dan gaya brace Rapat, lalu klik Cantikkan. Anda mendapatkan kembali blok yang mudah dibaca: a { di barisnya sendiri, deklarasi color: red; dan margin: 0; masing-masing diindentasi satu level lebih dalam, kurung kurawal penutup berbaris di bawah selektor, dan aturan b mengikut di bawah. Ubah gaya brace menjadi Renggang dan setiap brace pembuka jatuh ke barisnya sendiri. Ubah indentasi menjadi Tab dan setiap level beralih dari dua spasi ke karakter tab. Gayanya identik; hanya tata letak yang berubah.
FAQ
Apakah ini berjalan di peramban saya?
Ya. Pustaka js-beautify dimuat secara lazy pertama kali Anda mengklik Cantikkan atau mengaktifkan mode langsung, lalu di-cache. CSS Anda tidak pernah meninggalkan halaman — tidak ada round-trip ke server dan tidak ada unggahan.
Apakah pengindahan sama dengan un-minifying?
Ini memulihkan pemformatan yang bisa dibaca — indentasi, jeda baris, dan spasi — tetapi tidak dapat memulihkan komentar yang dihapus oleh minifikasi atau memulihkan struktur yang tidak pernah ada dalam file. Ia hanya memformat ulang deklarasi dan selektor yang ada.
Apakah pengindahan mengubah cara gaya saya dirender?
Tidak. Pengindahan hanya menambah dan menghapus spasi serta jeda baris; cascade tidak tersentuh dan halaman dirender identik. Urutan properti, spesifisitas, dan nilai semuanya tetap persis seperti yang Anda tulis.
Apa arti pilihan gaya brace?
Rapat mempertahankan brace pembuka di baris yang sama dengan selektor (a {), yang merupakan konvensi CSS umum. Renggang menjatuhkan setiap brace pembuka ke barisnya sendiri di bawah selektor. Toggle baris kosong dan satu selektor per baris mengontrol jarak antara blok aturan dan bagaimana selektor yang dikelompokkan seperti h1, h2, h3 disusun.
Pengindahan CSS di sisi peramban memberi Anda stylesheet yang bisa dibaca tanpa langkah build atau unggahan. Tempel file yang diminify atau berantakan, pilih indentasi dan gaya brace Anda, lalu salin atau unduh hasilnya. Tidak ada yang meninggalkan perangkat Anda, tidak ada akun, dan pustaka hanya dimuat saat Anda memintanya — sehingga membuka halaman ini hanya memerlukan beberapa kilobyte, bukan satu megabyte.