Cara Menambahkan Komentar di CSS

Halo teman-teman!

Setelah sebelumnya kita membahas bagaimana cara menambahkan CSS ke HTML, kali ini kita akan bahas fitur kecil tapi penting dalam CSS, yaitu komentar. Yup, meskipun komentar tidak memengaruhi tampilan halaman web, tapi mereka sangat membantu saat kita ingin menjelaskan maksud dari suatu bagian kode — terutama saat kita bekerja dalam tim atau saat kita buka ulang kode yang pernah kita buat sebelumnya.

Apa Fungsi Komentar di CSS?

Komentar di CSS berguna sebagai catatan yang hanya bisa dibaca oleh kita sebagai developer. Komentar ini diabaikan oleh browser, jadi nggak akan berpengaruh ke tampilan halaman. Kita bisa pakai komentar untuk:

• Menjelaskan maksud dari bagian kode tertentu

• Menandai bagian layout seperti header, footer, atau section utama

• Menonaktifkan bagian kode untuk percobaan atau debugging

Cara Menulis Komentar di CSS

Formatnya sangat simpel. Cukup gunakan tanda berikut:

/* Ini komentar */

Teks apa pun yang ada di antara /* dan */ akan dianggap sebagai komentar.

Contoh penggunaan:

/* Warna latar dan teks untuk halaman utama */
body {
  background-color: #f9f9f9;
  color: #333;
}

/* Gaya untuk tombol utama */
.button-primary {
  background-color: #007bff;
  color: white;
  border-radius: 4px;
}

Menonaktifkan Kode Sementara

Kadang kita ingin menguji perubahan tanpa benar-benar menghapus kode aslinya. Nah, komentar bisa digunakan untuk "menyembunyikan" sementara bagian CSS tersebut.

/*
.button-primary {
  background-color: red;
}
*/

Teknik ini sangat berguna saat kamu sedang melakukan eksperimen atau mengecek bug di styling.

Tips Menggunakan Komentar dengan Efektif

• Gunakan komentar seperlunya saja. Jangan terlalu banyak supaya kode tetap bersih.

• Berikan penjelasan yang singkat tapi jelas. Misalnya, “/* Style untuk bagian header */”

• Gunakan komentar untuk menandai bagian besar layout: header, navigasi, footer, dll.

• Hindari komentar yang tidak relevan atau sudah tidak sesuai dengan isi kode.

Yuk Coba Sendiri!

Sekarang kamu bisa buka file CSS kamu dan mulai menambahkan komentar di tempat-tempat penting. Coba beri catatan di awal setiap section styling, atau beri label untuk tombol, layout, dan elemen lainnya.

Dengan membiasakan diri menulis komentar, kita bisa membuat kode lebih mudah dipahami, baik oleh kita sendiri di masa depan, maupun oleh teman yang membaca atau mengembangkan kode kita.

Di materi selanjutnya, kita akan mulai bahas tentang warna di CSS — dari format dasar sampai pilihan warna yang bisa bikin tampilan web kamu makin menarik!

Baca juga