Komentar CSS

Saat berkas CSS tumbuh dari sepuluh baris menjadi lima ratus, pembaca berikutnya — termasuk diri kita sendiri enam bulan lagi — butuh petunjuk mengapa kode ditulis demikian. Komentar adalah jawaban CSS untuk kebutuhan itu: catatan yang boleh ditulis bebas di dalam kode tanpa mempengaruhi tampilan sedikit pun. Pada chapter ini kita membahas satu-satunya bentuk komentar yang CSS kenal, jebakan klasik yang paling sering ditularkan dari JavaScript, dan tiga kegunaan yang benar-benar terpakai setiap hari.

Satu-satunya Bentuk Komentar: /* … */ #

CSS hanya mengenal satu bentuk komentar, dibuka dengan /* dan ditutup dengan */:

/* Panel promo memakai warna hangat agar menonjol di antara kartu lain */
.panel-promo {
  background-color: #fff7ed;
  color: #7c2d12;
}

Komentar yang sama boleh membentang beberapa baris — semua di antara /* dan */ dianggap catatan:

/* Bagian panel promo
   Direvisi terakhir saat pembaruan palet warna.
   Warna mengikuti kelompok "hangat" di design system. */
.panel-promo {
  padding: 16px;
}

Browser sepenuhnya mengabaikan isi komentar: tidak dihitung sebagai deklarasi, tidak dicocokkan sebagai selector, tidak berpengaruh pada hasil render. Perlu dicatat, berbeda dengan HTML yang punya <!-- --> dan JavaScript yang punya // sekaligus /* */, CSS hanya menyediakan satu bentuk untuk semua kebutuhan.

Jebakan Komentar Garis Miring Ganda #

Pemula yang baru pindah dari JavaScript sering menulis //. CSS tidak mengenal bentuk ini. Lihat apa yang terjadi:

// Mengatur banner utama
.banner-utama {
  color: #fff8e1;
}

Parser membaca // Mengatur banner utama .banner-utama sebagai satu “selector” yang tidak valid, sehingga seluruh rule — termasuk blok deklarasinya — dibuang. Perbaikannya sederhana:

/* Mengatur banner utama */
.banner-utama {
  color: #fff8e1;
}

Bandingkan rule yang gagal dan yang sudah diperbaiki dalam satu demo:

Larangan Komentar Bersarang #

Komentar CSS tidak bisa ditumpuk di dalam komentar lain. Komentar selalu berakhir di */ yang pertama; sisanya kembali dibaca sebagai kode. Pada penulisan /* luar /* dalam */ color: red; */, parser menganggap komentar selesai di */ pertama, lalu membaca color: red; */ sebagai kode yang tidak valid dan membuangnya. Sifat ini sebenarnya sama dengan komentar blok pada JavaScript maupun HTML — tak satu pun dari bahasa tersebut mendukung komentar bertingkat. Kebiasaan yang aman: saat perlu mematikan blok kode yang di dalamnya sudah ada komentar, bersihkan komentar bagian dalam terlebih dahulu, atau cukup hapus kode yang tidak dipakai.

Tiga Kegunaan yang Bernilai #

Keterangan identitas berkas. Banyak tim meletakkan blok komentar di baris paling atas stylesheet — nama berkas, tujuannya, dan terakhir diubah kapan. Baris pertama berkas punya peran seperti halaman sampul: pembaca baru langsung tahu sedang membuka berkas apa.

Penanda bagian berkas. Pola garis sama dengan membuat “daftar isi” yang terlihat saat menggulir berkas dengan cepat:

/* ===== Header situs ===== */
/* ===== Panel harga ===== */
/* ===== Footer ===== */

Menjelaskan alasan, bukan mengulang kode. Baris kode sudah menjawab “apa”; komentar yang berharga menjawab “mengapa”:

/* Gap 1px untuk menutup celah render di antara kolom pada layar beresolusi tinggi */
.galeri-grid {
  gap: 1px;
}

Mematikan deklarasi sementara saat eksperimen. Cara tercepat membandingkan tampilan dengan dan tanpa satu deklarasi:

.panel-promo {
  background-color: #fff7ed;
  /* border: 2px dashed #fdba74; — sementara dimatikan, diuji dulu tanpa border */
}

Kedua kegunaan itu berjumpa dalam satu potongan stylesheet nyata:

Hapus penanda /* dan */ pada baris border di demo tersebut, dan garis putus-putusnya langsung hadir.

Ingat untuk membereskannya kembali sebelum pekerjaan digabung: komentar eksperimen yang tertinggal membuat pengelola kode berikutnya ragu apakah baris itu masih dibutuhkan.

Satu catatan terakhir: jangan mengomentari hal yang sudah dijawab kode. Penulisan /* mengatur warna teks */ tepat di atas color: #14503a; hanya menambah kebisingan — komentar paling bernilai menyimpan informasi yang tidak terlihat dari kodenya, seperti alasan, batasan, atau tautan ke keputusan desain.

Ringkasan #

CSS hanya menyediakan satu bentuk komentar, /* ... */, yang boleh membentang banyak baris, tidak bisa disarangkan, dan sepenuhnya diabaikan browser. Hindari kebiasaan // yang terbawa dari JavaScript karena membuat rule ikut gagal, dan manfaatkan komentar untuk penanda bagian, penjelasan alasan, serta eksperimen cepat. Selanjutnya kita menambah kapasitas satu rule: menulis banyak declaration sekaligus dengan rapi.