Comment trong css truonghoclaptrinh.com: giải thích đầy đủ, ví dụ và cách áp dụng

Comment trong CSS là phần ghi chú được đặt giữa /* và */. Trình duyệt không dùng nội dung comment để tạo kiểu trang; bạn có thể ghi chú một dòng, nhiều dòng hoặc tạm vô hiệu hóa một quy tắc. Cú pháp này không dùng // như một số ngôn ngữ lập trình.

Comment CSS là gì?

Comment là ghi chú nằm trong stylesheet để người viết giải thích mục đích của đoạn mã, đánh dấu một khu vực hoặc tạm bỏ một phần khai báo khi kiểm tra. Cú pháp chuẩn là dấu mở /* và dấu đóng */. MDN mô tả cùng một dạng cú pháp cho cả comment một dòng và nhiều dòng; CSS không có cú pháp comment một dòng riêng bằng hai dấu gạch chéo.

Trình duyệt bỏ qua nội dung nằm trong comment khi xử lý kiểu trang. Vì vậy dòng /* màu nền tạm thời */ không làm thay đổi màu nền. Nếu comment bao quanh một khai báo CSS, trình duyệt cũng không áp dụng khai báo đó trong thời gian nó bị ghi chú. Điều này hữu ích khi thử nghiệm một thay đổi nhỏ, nhưng không nên biến stylesheet thành kho chứa những phương án cũ không còn dùng.

Cụm từ tìm kiếm có tên miền truonghoclaptrinh.com không phải một cú pháp hay tính năng CSS. Bài viết này giải thích comment theo chuẩn CSS phổ biến, không đại diện hay khẳng định quan hệ với một website cùng tên miền. Nếu bạn đang đọc hướng dẫn ở một trang cụ thể, hãy đối chiếu ví dụ với file CSS thật của dự án.

Cú pháp và ví dụ

Một comment ngắn có thể nằm trên cùng dòng với quy tắc, nhưng thường dễ đọc hơn khi đặt ở dòng riêng phía trên phần được giải thích. Phần giữa dấu mở và dấu đóng có thể chứa chữ, dấu câu, dấu xuống dòng và ký hiệu khác; điều quan trọng là comment phải được đóng đúng vị trí.

/* Màu nền của phần nội dung chính */
main {
  background-color: #f7f8fa;
}

Comment nhiều dòng dùng cùng cặp dấu, không cần mỗi dòng bắt đầu bằng dấu sao. Có thể căn dấu sao để người đọc dễ thấy đây là khối ghi chú, nhưng đó chỉ là quy ước trình bày, không làm thay đổi cách trình duyệt đọc CSS.

/*
  Khu vực thẻ bài viết.
  Giữ khoảng cách giữa các thẻ đồng nhất.
*/
.card-list {
  gap: 1rem;
}

Khi cần kiểm tra xem một khai báo có gây ra lỗi hay không, bạn có thể tạm thời bao quanh nó bằng comment. Hãy giới hạn vùng comment ở đúng khai báo cần thử để tránh vô tình tắt những quy tắc phía sau.

.notice {
  color: #243447;
  /* background-color: #fff4cc; */
  border-left: 4px solid #d99000;
}

CSS comment không đồng nghĩa với HTML comment. Trong file HTML, <!-- ghi chú --> là comment của markup. Khi trình duyệt parse phần tử <style>, nội dung bên trong là CSS nên dùng /* ... */. Nếu bạn muốn giải thích vị trí đặt stylesheet trong tài liệu, hãy đặt HTML comment bên ngoài CSS; nếu ghi chú một khai báo ở trong stylesheet, hãy dùng cú pháp CSS.

Thuộc tính cần nhận biết

Khi đọc comment trong code, người mới học thường quan tâm cú pháp trước. Trong công việc, một số thuộc tính khác cũng quyết định comment có giúp ích hay gây nhầm lẫn. Hãy hiểu từng trường theo vai trò của nó.

• Dấu mở và dấu đóng: /* bắt đầu comment; */ kết thúc. Mọi nội dung giữa chúng bị bỏ qua như comment.
• Phạm vi: vị trí dấu đóng quyết định phần CSS nào tiếp tục được parse. Thiếu dấu đóng có thể khiến phần còn lại của stylesheet bị coi là comment.
• Mục đích: giải thích lý do của quy tắc, giới hạn trình duyệt, điều kiện thiết kế hoặc liên kết tới ticket cần xử lý.
• Ngữ cảnh: comment nên sát selector hoặc khai báo được nói đến, để không bị hiểu thành hướng dẫn cho khối bên cạnh.
• Thời hạn: comment tạm thời để debug cần được xóa hoặc cập nhật sau khi kiểm tra xong.
• Khả năng xuất bản: comment trong source không phải vùng bảo mật. Người dùng có thể xem mã CSS được tải cùng trang; không đặt mật khẩu, token hay dữ liệu cá nhân trong đó.
• Công cụ build: minifier hoặc bundler có thể loại bỏ comment khi tạo CSS production. Cách xử lý tùy cấu hình, vì vậy không dựa vào comment thông thường để lưu thông báo bắt buộc phải xuất hiện.

Khi nào nên ghi comment?

Comment hữu ích nhất khi câu lệnh không tự giải thích được lý do. Ví dụ, một breakpoint ít gặp có thể được chọn để khớp với nội dung chứ không theo một con số thiết bị phổ biến; một selector có độ ưu tiên đặc biệt có thể tồn tại để hỗ trợ trạng thái legacy; một khai báo có thể cần giữ vì tương thích thành phần nhúng. Hãy ghi lý do và giới hạn cụ thể để người sửa sau biết điều gì cần xác minh trước khi thay đổi.

Không cần chú thích mọi dòng hiển nhiên như color: red bằng câu “đổi màu chữ thành đỏ”. Comment đó lặp lại chính code và nhanh chóng lỗi thời nếu màu đổi. Thay vào đó, giải thích quyết định: “Dùng màu này để đạt tương phản trên nền cảnh báo” — và nếu có design token, tham chiếu token đang dùng.

Comment tạm tắt code có giá trị trong quá trình khoanh vùng một lỗi nhỏ. Sau khi xác định nguyên nhân, hãy xóa đoạn thử nếu không còn cần. Nếu cần lưu phương án trước đây để thảo luận, lịch sử Git, pull request hoặc ticket thường rõ nguồn và dễ phục hồi hơn. Một khối comment lớn giữ code cũ có thể khiến người đọc không biết đoạn nào chạy, đoạn nào còn là phương án.

Comment không thay thế tên biến, cấu trúc CSS hợp lý hay tài liệu thiết kế. Nếu một khối cần nhiều đoạn giải thích để hiểu, hãy cân nhắc tách component, dùng custom property có tên gợi nghĩa hoặc làm rõ ranh giới stylesheet. Comment giúp bổ sung ngữ cảnh; nó không sửa một thiết kế code khó đọc.

Ví dụ thực hành: tìm lỗi giao diện

Giả sử tiêu đề trên thẻ thông báo bị tràn ra ngoài màn hình nhỏ. Bạn nghi ngờ một khai báo white-space: nowrap nhưng chưa chắc. Thay vì xóa cả selector, hãy tạm comment đúng thuộc tính đó, tải lại trang ở cùng kích thước viewport và quan sát. Nếu tiêu đề xuống dòng đúng, bạn đã cô lập được nguyên nhân có khả năng liên quan; vẫn cần kiểm tra trạng thái hover, nội dung dài và browser khác trước khi kết luận.

.notice-title {
  font-weight: 700;
  /* white-space: nowrap; */
  overflow-wrap: anywhere;
}

Tiếp theo, quyết định đúng là xóa khai báo thừa hay thay bằng điều kiện responsive theo thiết kế. Không giữ nó ở dạng comment trong bản cuối với lý do “có thể cần lại”. Nếu quy tắc phải bật ở màn hình rộng nhưng tắt ở màn hình hẹp, hãy biểu đạt điều kiện rõ bằng media query, rồi dùng comment giải thích vì sao breakpoint gắn với nội dung.

.notice-title {
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .notice-title {
    white-space: normal;
  }
}

Prompt tự rà stylesheet: “Đọc đoạn CSS sau. Liệt kê comment nào nêu lý do hữu ích, comment nào chỉ lặp lại code, và vị trí nào có thể bị ảnh hưởng bởi comment chưa đóng hoặc comment lồng nhau. Không tự thay đổi code. Với mỗi nhận xét, trích selector và đề xuất cách kiểm tra trên giao diện.”

Ví dụ này cũng cho thấy comment không phải công cụ debug duy nhất. Developer tools cho phép bật/tắt declaration, xem quy tắc bị ghi đè và thử viewport mà không sửa source ngay. Khi đã hiểu nguyên nhân, hãy cập nhật file, chạy kiểm tra trực quan và xem diff để bảo đảm không giữ lại thay đổi thử nghiệm.

Lỗi thường gặp và cách xử lý

Comment chưa đóng là lỗi đáng chú ý vì trình duyệt có thể coi toàn bộ phần tiếp theo là comment cho đến dấu đóng phù hợp hoặc hết stylesheet. MDN mô tả hành vi xử lý comment CSS và lưu ý comment lồng nhau không hoạt động như một khối con. Nếu vừa thêm một ghi chú mà nhiều quy tắc biến mất, hãy kiểm tra dấu đóng trước khi sửa selector.

Quy trình dùng comment trong nhóm

1. Viết sát lý do: đặt ghi chú cạnh đoạn code liên quan, nêu quyết định hoặc ràng buộc chứ không diễn giải lại từng thuộc tính.
2. Chọn phạm vi nhỏ: nếu tạm tắt CSS, comment đúng một declaration hoặc một rule cần thử.
3. Kiểm tra sản phẩm: thử trang ở trạng thái và kích thước ảnh hưởng, xem DevTools và chạy kiểm tra giao diện của dự án.
4. Rà lại trước commit: tìm comment thử nghiệm, mục cần xử lý đã hết hạn và thông tin nhạy cảm; đọc diff với người review.
5. Giữ lịch sử ở đúng nơi: chuyển quyết định dài hạn vào tài liệu component hoặc ticket; dùng lịch sử Git để khôi phục phiên bản cũ.

Nếu comment mô tả một yêu cầu nghiệp vụ đang thay đổi, hãy gắn nó với nơi quản lý yêu cầu để người sửa CSS biết phải cập nhật khi nào. Nếu chỉ mô tả màu hay kích thước hiện rõ trong declaration, bỏ ghi chú thừa để file dễ quét. Một stylesheet dễ bảo trì thường có comment ít nhưng giàu ngữ cảnh.

Người mới học HTML và CSS có thể xem thêm kinh nghiệm học môn Lập trình website đầu tiên. Bài này bổ sung bối cảnh học web; cú pháp comment vẫn cần đối chiếu với tài liệu CSS bên dưới.

Nguồn tham khảo

• MDN: Comments – CSS
• MDN: CSS syntax error handling
• W3C: CSS Syntax Module Level 3, consume a comment

Câu hỏi thường gặp