ใน CSS คุณสามารถใช้ “comments” (ความคิดเห็น) เพื่อเพิ่มคำอธิบายหรือโน้ตต่าง ๆ ลงในโค้ดของคุณ โดยคอมเมนต์นี้จะไม่ส่งผลต่อการทำงานของโค้ด และจะไม่แสดงผลในหน้าเว็บไซต์ Comments มีประโยชน์มากในการช่วยให้คุณหรือผู้ร่วมงานสามารถเข้าใจโค้ดได้ง่ายขึ้นเมื่อต้องการแก้ไขหรือเพิ่มเติมในอนาคต
รูปแบบการเขียนคอมเมนต์ใน CSS
คอมเมนต์ใน CSS จะเริ่มต้นด้วย /* และสิ้นสุดด้วย */ ข้อความที่อยู่ภายในเครื่องหมายนี้จะไม่ถูกอ่านโดยเบราว์เซอร์
ตัวอย่าง
/* This is a comment */
body {
background-color: #f0f0f0;
}
ในตัวอย่างนี้ ข้อความ “This is a comment” คือคอมเมนต์ที่ไม่ส่งผลต่อการทำงานของ CSS ใด ๆ
การใช้งานคอมเมนต์
- อธิบายส่วนของโค้ด คอมเมนต์สามารถใช้เพื่ออธิบายว่าโค้ดส่วนนั้นทำงานอย่างไร หรือมีจุดประสงค์อะไร
/* Set background color for the body */
body {
background-color: #f0f0f0;
}
- โน้ตส่วนที่ยังไม่สมบูรณ์ หากคุณเขียนโค้ดไปยังไม่เสร็จ หรือจะต้องทำการแก้ไขเพิ่มเติมในภายหลัง คุณสามารถใส่คอมเมนต์เพื่อเตือนตนเองหรือทีมงาน
/* To be adjusted for mobile responsiveness */
.container {
width: 100%;
}
- ปิดการใช้งานโค้ดชั่วคราว บางครั้งคุณอาจต้องการปิดการใช้งานโค้ดบางส่วนชั่วคราวเพื่อทำการทดสอบ
/*
.header {
background-color: #ff0000;
}
*/
- จัดระเบียบโค้ด การใช้คอมเมนต์เพื่อแยกส่วนต่าง ๆ ของโค้ดสามารถทำให้การอ่านและแก้ไขโค้ดเป็นเรื่องง่ายขึ้น
/* Typography settings */
h1 {
font-size: 2em;
}
/* Layout settings */
.container {
margin: 0 auto;
max-width: 1200px;
}
คำแนะนำในการใช้คอมเมนต์
- ใช้คอมเมนต์อย่างมีเหตุผล อย่าใส่คอมเมนต์ในทุกบรรทัดหากไม่จำเป็น ควรใส่ในส่วนที่ต้องการอธิบายหรือที่ซับซ้อน
- ควรเขียนคอมเมนต์ให้สั้น กระชับ และตรงประเด็น
- หลีกเลี่ยงการใช้คอมเมนต์เพื่ออธิบายสิ่งที่ชัดเจนแล้วจากชื่อของคลาสหรือองค์ประกอบ