Fundamentals
การตั้งชื่อ Class ที่ดี
ชื่อ class ที่ดีทำให้อ่าน CSS ได้โดยไม่ต้องเปิด HTML คู่กัน บทนี้สอนหลักการตั้งชื่อ class แบบ semantic พร้อมตัวอย่างเปรียบเทียบที่นำไปใช้ได้ทันที
ทำไมชื่อ class ถึงสำคัญ
ใน CSS คุณใช้ class selector เพื่อเลือก element ที่ต้องการตกแต่ง แต่คุณคือคนที่ตั้งชื่อ class นั้นเอง ปัญหาคือ class ชื่อ "a1", "box2", หรือ "red" บอกอะไรไม่ได้เลยว่า element นั้นทำหน้าที่อะไร เมื่อโปรเจกต์ใหญ่ขึ้นหรือทำงานกับทีม คุณหรือเพื่อนร่วมทีมจะต้องเปิดไฟล์ HTML ทุกครั้งเพื่อเดาว่า class นั้นอยู่กับ element ไหน ชื่อ class ที่ดีทำให้อ่าน CSS ได้โดยไม่ต้องเปิด HTML คู่กันตลอดเวลา
Mental Model: class ที่ดีคือป้ายชื่อที่อ่านแล้วรู้ทันที
ลองนึกถึงตู้เก็บของในออฟฟิศ ตู้ที่ติดป้ายว่า "ของ" กับตู้ที่ติดป้ายว่า "เครื่องเขียน" — คุณจะหยิบของได้เร็วกว่าจากตู้ไหน? class ใน CSS ก็เหมือนกัน ชื่อที่ดีต้องบอกได้ว่า element นั้นคืออะไรและทำหน้าที่อะไร โดยไม่ต้องเปิดไฟล์อื่นมาประกอบ
ชื่อ class ที่ดีบอกหน้าที่ของ element ได้ทันทีโดยไม่ต้องเปิด HTML
กฎการตั้งชื่อ class ที่ดี
กฎเหล่านี้ไม่ใช่ข้อบังคับของภาษา CSS แต่เป็นแนวปฏิบัติที่นักพัฒนาทั่วโลกใช้ร่วมกัน เพื่อให้โค้ดอ่านง่ายและทำงานร่วมกันได้
- ใช้ตัวพิมพ์เล็กทั้งหมด และใช้ hyphen (-) คั่นระหว่างคำ เช่น main-header, card-title
- ตั้งชื่อตามหน้าที่หรือความหมาย ไม่ใช่หน้าตา เช่น error-message ดีกว่า red-text
- ชื่อต้องอ่านแล้วเข้าใจได้โดยไม่ต้องเดา เช่น button-submit ดีกว่า btn
- ไม่ย่อจนกำกวม — ถ้าย่อแล้วคนอื่นต้องคิดนานกว่าจะรู้ว่าหมายความว่าอะไร ให้เขียนเต็มดีกว่า
- ไม่ขึ้นต้นด้วยตัวเลขหรืออักขระพิเศษ CSS จะไม่รู้จัก class แบบนั้น
ตัวอย่างเปรียบเทียบ: ชื่อที่ไม่ดี vs ชื่อที่ดี
ตารางด้านล่างแสดงตัวอย่างชื่อ class ที่พบบ่อย เปรียบเทียบกับชื่อที่ดีกว่า พร้อมเหตุผล
| ชื่อที่ไม่ดี | ชื่อที่ดีกว่า | เหตุผล |
|---|---|---|
| red | error-message | บอก role ของ element ไม่ใช่แค่สี — สีอาจเปลี่ยนได้ แต่ role ยังเดิม |
| box1 | card-product | ตัวเลขไม่มีความหมาย ควรบอก context ว่าเป็น card ของอะไร |
| btn | button-submit | ย่อสั้นเกินไป ต้องเดา — เขียนเต็มให้ชัดกว่า |
| big-text | heading-section | หน้าตา (big) เปลี่ยนได้ตาม design แต่ความหมาย (heading) ไม่เปลี่ยน |
| d-none | is-hidden | d-none มาจาก Bootstrap ถ้าไม่รู้จะงง — is-hidden อ่านได้เองทันที |
| wrapper2 | sidebar-nav | เลข 2 ไม่บอกอะไร — ให้ชื่อสะท้อน layout จริงของ element |
ตัวอย่างโค้ด: ชื่อ class กระทบการอ่านโค้ดอย่างไร
ดูตัวอย่างด้านล่าง ทั้งสองชุดให้ผลลัพธ์บนหน้าจอเหมือนกัน แต่ชุดที่สองอ่านได้โดยไม่ต้องเปิด HTML มาประกอบ
ชุดที่ 1 — ชื่อ class ไม่มีความหมาย อ่านแล้วเดาไม่ออกว่า element ไหนทำอะไร
ชุดที่ 2 — ชื่อ class บอกหน้าที่ชัดเจน อ่านไฟล์ CSS เพียงไฟล์เดียวก็เข้าใจได้ทันที
สรุป
- ใช้ตัวพิมพ์เล็กและ hyphen (-) คั่นคำเสมอ เช่น main-header, card-product
- ตั้งชื่อตามหน้าที่ (semantic) ไม่ใช่ตามหน้าตา (presentational)
- อ่านชื่อแล้วต้องรู้ทันทีว่า element นั้นคืออะไรและทำหน้าที่อะไร
- ไม่ย่อจนต้องเดา — ชื่อที่ชัดดีกว่าชื่อที่สั้น
- ไม่ขึ้นต้นด้วยตัวเลขหรืออักขระพิเศษ