Komentar di CSS: Sintaks dan Cara Menulisnya

Cara menulis komentar CSS

Komentar CSS diawali /* dan diakhiri */. Semua yang ada di antaranya diabaikan oleh browser, entah panjangnya satu baris atau dua puluh baris.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
  <style>
    /* Single-line comment */
    .note {
      background: #e5e7eb; /* after a declaration */
      padding: 8px 12px;
    }

    /*
      Multi-line comment:
      the same syntax, spread over several lines.
    */
    .note strong {
      color: #2563eb;
    }
  </style>
</head>
<body>
  <p class="note">The comments change <strong>nothing</strong> on screen.</p>
</body>
</html>

Hanya ada satu sintaks ini. CSS tidak punya komentar satu baris yang terpisah.

Di mana komentar bisa ditaruh

Komentar bisa ditaruh di mana pun spasi diizinkan: di antara aturan, di antara deklarasi, setelah nilai, di dalam daftar selector. Cara kerjanya sama di file .css, di elemen <style>, dan di atribut style.

/* Buttons */
.btn,          /* default */
.btn-primary { /* variant */
  padding: 8px 14px; /* 8px top and bottom, 14px sides */
}

<p style="color: #16a34a; /* inline comments work too */">Hello</p>

Komentar HTML, <!-- ... -->, dipakai untuk markup, bukan untuk CSS. Kedua sintaks itu dibandingkan berdampingan di halaman komentar HTML.

Menonaktifkan kode dengan komentar

Penggunaan komentar sehari-hari adalah mematikan sebuah deklarasi untuk melihat apa fungsinya, tanpa menghapusnya. Bungkus dengan /* */:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .box {
      background: #2563eb;
      color: white;
      padding: 16px;
      /* border: 6px solid #f59e0b; */
      /* border-radius: 12px; */
    }
  </style>
</head>
<body>
  <div class="box">Border and radius are commented out.</div>
</body>
</html>

Hapus /* dan */ di sekitar baris border, dan border kuning tua akan muncul. Menonaktifkan seluruh aturan juga dengan cara yang sama: taruh /* sebelum selector dan */ setelah kurung kurawal penutup.

Sebagian besar editor bisa melakukannya untukmu: pilih baris-barisnya lalu tekan Ctrl + / (Cmd + / di macOS).

Kenapa // merusak CSS-mu

// terlihat seperti komentar karena memang komentar di JavaScript, Sass, dan Less. Di CSS, tanda itu hanyalah dua karakter, dan keduanya menjadi bagian dari apa pun yang mengikutinya. Browser lalu melihat selector yang tidak valid dan membuang seluruh aturan berikutnya, tanpa pesan error.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Double slash</title>
  <style>
    p { padding: 6px 10px; }

    // this is NOT a comment
    .one { background: #16a34a; color: white; }

    .two { background: #2563eb; color: white; }
  </style>
</head>
<body>
  <p class="one">.one has no background: its rule was dropped.</p>
  <p class="two">.two is fine.</p>
</body>
</html>

Browser membaca // this is NOT a comment .one sebagai satu selector, yang tidak valid, jadi seluruh aturan .one dibuang. Ubah baris itu menjadi /* this is a comment */ dan background hijaunya kembali.

Komentar tidak bisa bersarang

Komentar berakhir di */ yang pertama. Membungkus kode yang sudah berisi komentar akan mengakhiri komentar luarmu terlalu cepat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested</title>
  <style>
    p { padding: 6px 10px; }

    /* outer start
    .old { color: red; } /* inner comment */
    outer end */

    .next { background: #f59e0b; }
    .last { background: #e5e7eb; }
  </style>
</head>
<body>
  <p class="next">.next is broken by the leftover "outer end */".</p>
  <p class="last">.last still works.</p>
</body>
</html>

Untuk menonaktifkan blok yang berisi komentar, hapus atau persingkat komentar di dalamnya lebih dulu.

Menata stylesheet dengan komentar

Stylesheet yang panjang lebih mudah dibaca dengan judul bagian. Konvensi yang umum:

/* ==========================================
   Layout
   ========================================== */

.page { max-width: 960px; margin: 0 auto; }

/* ------------------------------------------
   Header
   ------------------------------------------ */

.header { padding: 16px; }

/*! License: MIT (many minifiers keep comments that start with "!") */

Komentar dikirim ke setiap pengunjung sebagai bagian dari file dan terlihat di View Source, jadi jangan pernah menaruh password, URL internal, atau catatan yang tidak ingin kamu publikasikan.

Kesalahan umum

• Memakai //. Ini diam-diam menghapus aturan berikutnya. Pakai /* */.
• Komentar bersarang. */ yang pertama mengakhiri komentar; sisanya merusak aturan berikutnya.
• Lupa */ penutup. Semua yang ada setelah /*, sampai akhir stylesheet, menjadi komentar.
• Memakai <!-- --> di dalam CSS. Itu sintaks komentar HTML dan tidak menonaktifkan CSS.
• Meninggalkan rahasia di komentar. Komentar ikut terkirim ke browser bersama stylesheet.