Abd. Asis

Bab sebelumnya menutup dengan gambaran tentang cascade — mekanisme browser memutuskan gaya mana yang dijalankan ketika ada konflik. Saat kamu mulai menulis lebih banyak rule CSS, terutama di file eksternal yang bisa tumbuh menjadi ratusan baris, muncul kebutuhan baru: cara untuk meninggalkan catatan di dalam kode itu sendiri. Di sinilah komentar berperan.

Sintaks Komentar CSS

CSS hanya mengenal satu format komentar: diawali /* dan diakhiri */. Semua teks di antara kedua penanda itu diabaikan sepenuhnya oleh browser — tidak dirender, tidak mempengaruhi tampilan, tidak pula mempengaruhi performa.

/* portofolio.css */

/* Ini adalah komentar satu baris */
h1 {
  color: #1a2744;
}

Berbeda dengan JavaScript yang punya dua format (// untuk satu baris dan /* */ untuk blok), CSS hanya mengenal /* */. Tidak ada cara menulis komentar satu baris dengan // di CSS — jika kamu mencobanya, browser akan menganggapnya sebagai nilai yang tidak valid dan mengabaikan deklarasi tersebut.

// ini bukan komentar CSS yang valid — baris seperti ini tidak akan diproses sebagai komentar. Browser bisa berperilaku tidak terduga, bergantung pada konteks di mana ia muncul. Selalu gunakan /* */.

Komentar di Berbagai Posisi

Komentar bisa diletakkan di mana saja dalam file CSS: sebelum rule, setelah deklarasi, bahkan di antara selector dan kurung kurawal.

/* portofolio.css */

/* ================================
   Tipografi Global
   ================================ */
body {
  font-family: 'Inter', sans-serif; /* fallback ke sans-serif jika Inter gagal dimuat */
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  color: #1a2744; /* biru gelap — warna brand utama */
  font-size: 2rem;
}

/* Gaya khusus halaman bio */
.bio {
  color: #4b5563;
  max-width: 60ch; /* ~60 karakter per baris, nyaman dibaca */
}

Komentar di akhir baris seperti /* warna brand utama */ berguna untuk mencatat alasan di balik nilai tertentu. Enam bulan kemudian ketika kamu kembali ke file ini — atau ketika kolega membaca kode ini — mereka tidak perlu menebak mengapa kamu memilih warna itu.

Komentar Multi-baris

Satu pasang /* */ bisa mencakup banyak baris sekaligus. Ini berguna untuk menulis penjelasan yang lebih panjang atau membuat header section yang menonjol.

/* portofolio.css */

/*
 * Komponen: Kartu Proyek
 *
 * Kartu ini digunakan di halaman /proyek untuk menampilkan
 * daftar proyek terbaru. Lebar kartu mengikuti container,
 * dengan batas maksimum 380px agar tidak terlalu lebar di
 * layar besar.
 */
.kartu-proyek {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
  max-width: 380px;
}

.kartu-proyek__judul {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a2744;
  margin-bottom: 8px;
}

.kartu-proyek__deskripsi {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.6;
}

Komentar untuk Debugging

Salah satu penggunaan paling praktis dari komentar adalah menonaktifkan rule sementara tanpa menghapusnya. Ini berguna ketika kamu ingin mengisolasi sumber masalah tanpa kehilangan kode yang sudah ditulis.

/* portofolio.css */

.bio {
  color: #4b5563;
  max-width: 60ch;
  /* margin-top: 24px; */   /* dinonaktifkan sementara — cek apakah spacing dari elemen lain sudah cukup */
  padding: 0 16px;
}

Teknik ini lebih aman daripada langsung menghapus deklarasi — kamu bisa mengaktifkannya kembali hanya dengan menghapus /* dan */.

Saat debugging layout yang rumit, coba nonaktifkan satu properti sekaligus menggunakan komentar. Cara ini membantu kamu mengidentifikasi properti mana yang menyebabkan masalah tanpa kehilangan konteks kode yang sudah ditulis.

Menandai Section di Stylesheet

Untuk file CSS yang sudah cukup panjang, komentar bisa berfungsi sebagai pemisah visual antar section. Tidak ada standar baku — yang penting konsisten di seluruh proyek.

/* portofolio.css */

/* ============================================================
   1. Reset & Base
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
}

/* ============================================================
   2. Tipografi
   ============================================================ */

h1, h2, h3 {
  color: #1a2744;
  line-height: 1.3;
}

p {
  line-height: 1.7;
  color: #4b5563;
}

/* ============================================================
   3. Layout Utama
   ============================================================ */

.kontainer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   4. Komponen: Header
   ============================================================ */

.header {
  background-color: #1a2744;
  color: white;
  padding: 16px 0;
}

.header__nav {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

File CSS yang terstruktur seperti ini jauh lebih mudah dinavigasi, terutama ketika kamu mengerjakan proyek bersama orang lain atau kembali ke proyek setelah beberapa waktu.

Komentar dan Komentar HTML

Ketika CSS ditulis di dalam tag <style> di dokumen HTML, kode yang sama bisa punya dua jenis komentar bersebelahan — komentar HTML () untuk menandai bagian HTML, dan komentar CSS (/* */) untuk mendokumentasikan rule di dalamnya.

<!-- tentang.html -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Tentang Saya</title>

  <!-- Gaya internal khusus halaman ini -->
  <style>
    /* Warna diambil dari panduan brand portofolio */
    body {
      font-family: sans-serif;
      background-color: #f8fafc;
    }

    /* Highlight untuk kata kunci teknis */
    .sorot {
      background-color: #dbeafe;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <!-- Bagian utama konten -->
  <h1>Tentang Saya</h1>
  <p>Saya bekerja dengan <span class="sorot">CSS</span> setiap hari.</p>
</body>
</html>

Keduanya tidak terlihat di output browser — HTML comment disembunyikan oleh parser HTML, sedangkan CSS comment diabaikan oleh CSS engine.

Latihan

Buka file portofolio.css yang sudah kamu buat di bab sebelumnya dan coba hal-hal berikut:

Tambahkan komentar header di baris paling atas file yang mencatat nama file, tujuannya, dan tanggal terakhir diubah. Format bebas — pilih gaya yang menurutmu paling mudah dibaca.
Identifikasi setiap rule yang sudah ada dan tambahkan komentar singkat (satu baris) yang menjelaskan mengapa kamu memilih nilai tersebut, bukan sekadar apa nilainya. Misalnya, bukan /* font-size besar */ tapi /* ukuran heading utama, standar untuk h1 di breakpoint desktop */.
Pilih dua atau tiga properti dan nonaktifkan menggunakan komentar. Amati hasilnya di browser, lalu aktifkan kembali. Ini melatih workflow debugging yang akan sering kamu gunakan ke depannya.

Komentar adalah dokumentasi termurah yang bisa kamu tulis — tidak mempengaruhi ukuran file yang di-render (browser mengabaikannya), tapi nilainya jauh lebih besar dari ukurannya. Setelah terbiasa mendokumentasikan kode dengan komentar, saatnya kita lihat apa yang terjadi ketika browser justru tidak bisa membaca kode yang kita tulis — bagaimana CSS menangani error, dan bagaimana kita bisa mendeteksinya.

BAB 6: Komentar CSS

Sintaks Komentar CSS

Komentar di Berbagai Posisi

Komentar Multi-baris

Komentar untuk Debugging

Menandai Section di Stylesheet

Komentar dan Komentar HTML

Latihan

Referensi