Comment trong CSS là phần ghi chú nằm giữa /* và */. Trình duyệt không dùng nội dung comment để tạo kiểu trang, cho phép bạn 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 khác. Đặt comment trước nhóm quy tắc giúp người đọc nhận ra mục đích của từng phần.
Mục lục
- Comment CSS là gì?
- Cú pháp và ví dụ
- Thuộc tính cần nhận biết
- Khi nào nên ghi comment?
- Ví dụ thực hành: tìm lỗi giao diện
- Lỗi thường gặp và cách xử lý
- Quy trình dùng comment trong nhóm
- Nguồn tham khảo
- Câu hỏi thường gặp
Comment CSS là gì?
Comment là ghi chú trong stylesheet để 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ả 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 trong comment khi xử lý kiểu trang, do đó 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ỏ.
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ú.
/*
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 bao quanh nó bằng comment.
.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, 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.
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. Dấu mở và dấu đóng, phạm vi và vị trí dấu đóng quyết định phần CSS nào tiếp tục bị bỏ qua như comment.