Baricode LMS - Komentar CSS

Komentar CSS 💬

Seperti HTML, CSS juga memiliki fitur komentar — teks di dalam kode yang tidak diproses oleh browser dan tidak mempengaruhi tampilan halaman.

Sintaks Komentar CSS

Berbeda dengan HTML yang menggunakan , komentar CSS menggunakan /* */:

/* Ini adalah komentar CSS */

p {
  color: red; /* komentar di akhir baris juga valid */
}

Semua teks di antara /* dan */ akan diabaikan sepenuhnya oleh browser.

Komentar Satu Baris

/* Mengatur warna teks utama */
body {
  color: #1f2937;
}

/* Reset margin default browser */
* {
  margin: 0;
  padding: 0;
}

Komentar Multi-Baris

/*
  Komponen: Card Produk
  Digunakan di: halaman toko, halaman favorit
  Bergantung pada: variabel warna di :root
*/
.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Fungsi Komentar dalam Praktik Nyata

1. Memisahkan Bagian File CSS

File CSS yang panjang menjadi mudah dinavigasi dengan komentar sebagai pembatas bagian:

/* ================================
   RESET & BASE
   ================================ */
* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; }

/* ================================
   LAYOUT
   ================================ */
.container { max-width: 1200px; margin: 0 auto; }

/* ================================
   KOMPONEN: NAVIGASI
   ================================ */
nav { background: #1d4ed8; }

/* ================================
   KOMPONEN: KARTU
   ================================ */
.card { border-radius: 8px; }

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 768px) { ... }

2. Menjelaskan Nilai yang Tidak Jelas

.overlay {
  background: rgba(0, 0, 0, 0.5); /* hitam 50% transparan */
  z-index: 999; /* di atas semua elemen kecuali modal */
}

.container {
  max-width: 1280px; /* lebar maksimum konten di desktop */
  margin: 0 auto;   /* centering horizontal */
}

3. Menonaktifkan Kode Sementara

Daripada menghapus kode yang mungkin dibutuhkan lagi:

.tombol {
  background: #3b82f6;
  /* background: linear-gradient(135deg, #3b82f6, #8b5cf6); */
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  /* border: 2px solid #2563eb; */
}

4. Catatan Penting atau Peringatan

/* JANGAN ubah z-index di bawah ini tanpa koordinasi dengan tim */
.modal     { z-index: 1000; }
.dropdown  { z-index: 900; }
.tooltip   { z-index: 800; }

⚠️ Hal yang Perlu Diketahui

Komentar CSS tetap terlihat di source code — jangan tulis informasi sensitif:

/* JANGAN: */
/* API key: sk-xxxxxxxxxx */
/* Password database: admin123 */

Komentar CSS tidak bisa bersarang:

/* Ini akan error:
  /* komentar di dalam komentar */
*/

Komentar vs Tidak Ada Komentar

/* TANPA komentar — susah dipahami */
.a { display: flex; justify-content: space-between; align-items: center; }
.b { position: absolute; top: 0; right: 0; width: 100%; }

/* DENGAN komentar — jauh lebih jelas */
/* Header: logo di kiri, navigasi di kanan */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Banner promosi: menempel di bagian atas halaman */
.promo-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
}

💡 Tips: Komentar CSS yang baik menjelaskan mengapa sebuah nilai digunakan, bukan hanya apa yang dilakukan — karena kode sudah menjelaskan dirinya sendiri. Sertakan komentar untuk nilai-nilai "ajaib" seperti z-index, angka hardcoded, atau workaround bug browser tertentu. 🧑‍💻

Komentar CSS