Cú pháp chú thích trong CSS: cách viết comment trong CSS

Cách viết chú thích trong CSS

Chú thích (comment) trong CSS bắt đầu bằng /* và kết thúc bằng */. Mọi thứ nằm giữa chúng đều bị trình duyệt bỏ qua, dù chỉ một dòng hay hai mươi dòng.

<!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>

Chỉ có duy nhất cú pháp này. CSS không có kiểu chú thích một dòng riêng.

Chú thích được đặt ở đâu

Chú thích có thể nằm ở bất kỳ chỗ nào cho phép khoảng trắng: giữa các quy tắc, giữa các khai báo, sau một giá trị, bên trong danh sách selector. Nó hoạt động giống nhau trong tệp .css, trong phần tử <style> và trong thuộc tính 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>

Chú thích HTML, <!-- ... -->, dành cho markup, không dành cho CSS. Hai cú pháp được đặt cạnh nhau ở trang chú thích HTML.

Tạm tắt code bằng chú thích

Công dụng hằng ngày của chú thích là tắt một khai báo để xem nó làm gì mà không phải xóa nó. Bọc nó trong /* */:

<!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>

Xóa /* và */ quanh dòng border là viền màu hổ phách xuất hiện. Tắt cả một quy tắc cũng làm tương tự: đặt /* trước selector và */ sau dấu ngoặc nhọn đóng.

Hầu hết trình soạn thảo làm việc này giúp bạn: chọn các dòng rồi nhấn Ctrl + / (Cmd + / trên macOS).

Vì sao // làm hỏng CSS

// trông giống chú thích vì nó là chú thích trong JavaScript, Sass và Less. Trong CSS, nó chỉ là hai ký tự, và chúng trở thành một phần của bất cứ thứ gì đứng sau. Khi đó trình duyệt thấy một selector không hợp lệ và bỏ qua toàn bộ quy tắc tiếp theo, không có thông báo lỗi nào.

<!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>

Trình duyệt đọc // this is NOT a comment .one thành một selector, mà selector này không hợp lệ, nên cả quy tắc .one bị loại bỏ. Đổi dòng đó thành /* this is a comment */ là nền xanh lá quay trở lại.

Chú thích không lồng nhau được

Chú thích kết thúc ở */ đầu tiên. Bọc một đoạn code đã có chú thích bên trong sẽ khiến chú thích bên ngoài kết thúc sớm:

<!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>

Để tắt một khối có chứa chú thích, hãy xóa hoặc rút gọn các chú thích bên trong trước.

Sắp xếp stylesheet bằng chú thích

Stylesheet dài sẽ dễ đọc hơn khi có tiêu đề cho từng phần. Một quy ước phổ biến:

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

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

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

.header { padding: 16px; }

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

Chú thích được gửi tới mọi người truy cập như một phần của tệp và hiện ra khi xem mã nguồn trang, nên đừng bao giờ ghi mật khẩu, URL nội bộ hay những ghi chú bạn không muốn công khai.

Lỗi thường gặp

• Dùng //. Nó âm thầm xóa quy tắc tiếp theo. Hãy dùng /* */.
• Lồng chú thích. */ đầu tiên kết thúc chú thích; phần còn lại làm hỏng quy tắc tiếp theo.
• Quên */ đóng. Mọi thứ sau /*, cho đến cuối stylesheet, đều thành chú thích.
• Dùng <!-- --> bên trong CSS. Đó là cú pháp chú thích HTML và không tắt được CSS.
• Để lộ thông tin bí mật trong chú thích. Chúng được gửi tới trình duyệt cùng stylesheet.