Stylesheet yang dipelihara bertahun-tahun dibaca jauh lebih sering daripada ditulis. Komentar yang tepat dan pengorganisasian yang konsisten menjaga berkas panjang tetap mudah dinavigasi dan disunting. Topik ini membahas sintaks komentar CSS, pola komentar seksi beserta urutannya, pilihan pemformatan aturan, dan kebiasaan pengelompokan deklarasi.
Sintaks komentar#
CSS hanya mengenal satu bentuk komentar, yaitu teks yang diapit /* dan */. Komentar dapat menempati satu baris penuh, menutup sebagian baris, atau membentang beberapa baris. Browser mengabaikan seluruh isinya, sehingga komentar digunakan untuk menjelaskan maksud, menandai seksi, dan menonaktifkan deklarasi sementara saat mencari penyebab masalah. Komentar yang paling berharga menjelaskan alasan di balik nilai yang tidak lazim, misalnya jarak yang disesuaikan dengan kebutuhan tertentu.
/* komentar satu baris penuh */
p {
color: #1e293b; /* komentar pada akhir baris */
/*
komentar
beberapa baris
*/
line-height: 1.6;
}Komentar tidak dapat bersarang. Tanda */ yang pertama langsung menutup komentar, sehingga komentar yang memuat komentar lain meninggalkan sisa teks yang dibaca browser sebagai kode. Perilaku ini penting diingat ketika sebagian stylesheet dinonaktifkan dengan membungkusnya, karena blok yang sudah memuat komentar menghasilkan aturan rusak. Bentuk komentar satu baris bergaya // milik bahasa lain tidak dikenal CSS dan tidak boleh digunakan. Alat pemformat otomatis tetap mempertahankan komentar, sehingga komentar aman diletakkan di mana saja tanpa risiko hilang saat format ulang.
Komentar seksi dan urutan yang konsisten#
Stylesheet yang panjang dibagi menjadi seksi yang diawali komentar banner, yaitu komentar mencolok yang mudah ditemukan saat berkas digulir. Pola yang umum berbentuk /* ===== Bagian: navbar ===== */, karena deretan tanda sama dengan membuat baris itu menonjol di antara kode. Nama seksi ditulis singkat dan konsisten, misalnya reset, dasar, komponen, dan utilitas.
Berkas berikut memperlihatkan susunan tersebut pada stylesheet kecil untuk halaman profil kelas:
/* ============================================================
gaya.css — stylesheet halaman profil kelas
Urutan seksi: reset, dasar, komponen, utilitas
============================================================ */
/* ===== Seksi 1: reset ===== */
* {
margin: 0;
padding: 0;
}
/* ===== Seksi 2: dasar ===== */
body {
font-family: sans-serif;
line-height: 1.5;
color: #1e293b;
background-color: #f8fafc;
padding: 24px;
}
h1,
h2 {
margin-bottom: 8px;
}
/* ===== Seksi 3: komponen ===== */
.kartu-profil {
background-color: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 16px 20px;
max-width: 320px;
margin-bottom: 16px;
}
.jadwal-piket {
width: 100%;
border-collapse: collapse;
}
.jadwal-piket th,
.jadwal-piket td {
border: 1px solid #cbd5e1;
padding: 6px 10px;
text-align: left;
}
/* ===== Seksi 4: utilitas ===== */
.teks-penting {
font-weight: bold;
}
.lebar-penuh {
max-width: none;
}Urutan seksi mengikuti arah kegunaan. Seksi reset menyetel titik nol, seksi dasar mengatur elemen global seperti body dan judul, seksi komponen mengatur bagian yang dikenali secara utuh, dan seksi utilitas menaruh class bantu dengan cakupan sempit. Karena utilitas ditulis paling akhir, class bantu dapat menggantikan gaya komponen melalui urutan sumber tanpa selector yang lebih berat. Susunan ini sekaligus menjadi peta bagi pembaca baru, karena letak setiap jenis aturan dapat ditebak sebelum berkas dibuka. Komentar pembuka berkas pada contoh sekaligus berfungsi sebagai ringkasan karena menyebut nama berkas dan urutan bagian dalam dua baris pertama.
Satu deklarasi per baris atau gaya padat#
Dua gaya pemformatan aturan sama-sama lazim, dan keduanya bermakna identik bagi browser. Gaya bertingkat menulis satu deklarasi per baris, sedangkan gaya padat menulis seluruh aturan dalam satu baris. Perbedaan keduanya murni menyangkut keterbacaan dan penelusuran perubahan. Pilihan ini ditegakkan sejak proyek dimulai, karena mengubah format di tengah jalan menimbulkan banyak baris berubah yang mengaburkan perubahan isinya.
/* gaya bertingkat, cocok untuk aturan panjang */
.kartu {
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 16px;
}
/* gaya padat, cocok untuk aturan pendek */
.tengah { text-align: center; }Gaya bertingkat memudahkan alat kontrol versi menampilkan perubahan per deklarasi dan memudahkan mata menemukan deklarasi tertentu. Gaya padat menghemat ruang untuk aturan yang memang pendek, misalnya utilitas satu deklarasi. Kebiasaan yang sehat menetapkan satu pilihan untuk seluruh proyek, misalnya gaya bertingkat sebagai aturan umum dan gaya padat hanya untuk utilitas. Campuran tanpa pola justru memakan waktu saat berkas dibaca ulang. Banyak editor menyediakan format otomatis yang dapat menegakkan pilihan tersebut, sehingga kepatuhannya tidak bergantung pada kedisiplinan manual.
Kebiasaan pengelompokan properti#
Di dalam satu aturan, urutan deklarasi tidak memengaruhi hasil, tetapi urutan yang disiplin mempercepat pembacaan. Kelompok yang lazim digunakan mulai dari tata letak, lalu kotak dan jarak, kemudian tipografi, dan ditutup warna serta latar. Kelompok yang sama diterapkan di seluruh berkas, sehingga pembaca tahu ke mana harus melihat saat mencari satu properti.
.kartu {
/* tata letak */
display: block;
position: relative;
/* kotak dan jarak */
padding: 16px 20px;
border: 1px solid #cbd5e1;
border-radius: 8px;
/* tipografi */
font-family: sans-serif;
line-height: 1.5;
/* warna dan latar */
color: #1e293b;
background-color: #ffffff;
}Komentar kelompok seperti pada contoh berguna untuk aturan yang panjang, tetapi menjadi kebisingan pada aturan yang pendek. Gunakan komentar kelompok secara proporsional, dan utamakan konsistensi antar berkas. Kelompok yang tidak konsisten antar aturan justru tidak membantu, karena pembaca tetap harus memindai seluruh aturan. Alat pemformat otomatis juga dapat menyeragamkan urutan secara paksa, sehingga kebiasaan manual tidak lagi menjadi beban pada proyek yang melibatkan banyak penulis.
Kesalahan umum#
Kesalahan pertama adalah komentar yang bersarang secara tidak sengaja. Membungkus sebagian stylesheet dengan /* dan */ pada blok yang sudah memuat komentar membuat teks sesudah */ pertama terbaca sebagai kode. Hasilnya berupa deklarasi rusak yang diabaikan, atau lebih buruk, aturan yang berubah makna. Untuk menonaktifkan sementara, hapus barisnya atau beri komentar per baris.
Kesalahan kedua adalah komentar yang sekadar mengulang kode. Teks komentar yang hanya menyatakan warna di atas deklarasi color tidak menambah informasi apa pun. Komentar yang berguna menjelaskan alasan, misalnya mengapa satu nilai tidak lazim dipilih atau mengapa sebuah aturan harus mendahului aturan lain.
Kesalahan ketiga adalah urutan seksi yang berubah-ubah antar berkas. Susunan reset, dasar, komponen, utilitas yang konsisten membuat letak aturan dapat ditebak. Apabila setiap berkas menggunakan susunan berbeda, manfaat pengorganisasian hilang walaupun komentarnya lengkap.
Ringkasan#
- Komentar CSS ditulis di antara
/*dan*/, tidak dapat bersarang, dan seluruh isinya diabaikan browser. - Komentar banner menandai seksi stylesheet dengan urutan konsisten, misalnya reset, dasar, komponen, lalu utilitas.
- Gaya bertingkat dan gaya padat bermakna sama bagi browser, dan pilihannya perlu seragam di seluruh proyek.
- Pengelompokan deklarasi menurut fungsi mempercepat pembacaan dan pemeliharaan.
Referensi#
- Comments — MDN — Dokumentasi resmi sintaks komentar CSS dan keterbatasan bersarangnya.
- Syntax — MDN — Panduan resmi struktur berkas CSS yang menjadi dasar pengorganisasian.
- Learn CSS — web.dev — Kursus resmi Google dengan contoh penataan berkas gaya pada proyek latihannya.