ข้อความระวังในการเขียน CSS

อ่านเจอบทความหัวข้อ CSS Clean Code อธิบายการเขียน CSS ให้ดีว่าควรทำอย่างไร

1. การตั้งชื่อ

ระบุชื่อ selector ที่อธิบายตัวเองได้ และสามารถอ่านแล้วเข้าใจว่าคืออะไร

2. DRY หรือ Don't Repeat Yourself

บางครั้ง การกำหนด properties ให้กับ selector หลายๆ อัน มันก็อาจจะซ้ำๆ กัน ก็ควรรวมอันที่ใช้ซ้ำมาไว้ด้วยกัน และแยกเฉพาะ properties ที่แตกต่างกัน แยกออกไป เพื่อลดจำนวนบรรทัดของ CSS

3. ระวังการใช้ !important

เมื่อมีการใช้ !important ก็จะต้องคอยกังวลว่าจะไปชนกับ !important อื่นๆ และถ้ามี !important จำนวนมาก ก็จะยากในการจัดการ

4. รวมคำสั่งให้เป็นชุดเดียวกัน

คำสั่ง CSS หลายอัน สามารถกำหนด properties แยกย่อยได้ เช่น padding, margin, fonts หรือ bolder แนะนำว่าควรเขียนรวมกันเป็นชุดเดียวกัน

5. ไม่ใช้ CSS แบบ Inline

คำแนะนำคือ ควรแยก HTML และ CSS ออกจากกัน เพื่อการดูแลที่ง่ายกว่า และบางครั้งการใช้ CSS แบบ Inline ก็มักจะใช้ !important เขียนทับ CSS อื่นๆ เข้าไปอีกด้วย

6. มีความสม่ำเสมอ

ความสม่ำเสมอในที่นี้หมายถึง หากต้องกำหนดชื่อ class หรือ id แล้วต้องใช้สัญลักษณ์คั่นคำ ก็ควรจะใช้ให้เหมือนกันทั้งหมด เลือกใช้ระหว่าง dash (-) หรือ underscore (_)

หรือว่าการใช้เครื่องหมายคำพูด ว่าจะเลือก single quote หรือ double quote เป็นต้น

7. ไม่ควรเขียน Class ต่อกัน

การต่อ Class เช่น .button.submit ทำให้ยากในการกำหนดค่าเพิ่มเติม