Fundamentals
การตั้งชื่อ Class ที่ดี
เลือกและตั้งชื่อ class ตามบทบาทของ element เพื่อให้อ่าน CSS ได้โดยไม่ต้องเปิด HTML มาประกอบ
1) สถานการณ์: กลับมาอ่าน CSS ของตัวเองแล้วเดาไม่ออก
สมมติว่าสามเดือนก่อนคุณตั้งชื่อ class ตามใจ: กล่องคำเตือนชื่อ .box1, หัวข้อในกล่องชื่อ .t1 และข้อความสีแดงชื่อ .red — วันนี้ดีไซน์ให้เปลี่ยนสีของข้อความเตือนทั้งหมด คุณเปิดไฟล์ CSS แล้วต้องเริ่มจากคำถามว่า ".red นี่อยู่กับ element ไหน?" คุณเปิด HTML ขึ้นมาเทียบทีละไฟล์ เดาเอาว่า .box1 คือกล่องไหน แล้วยังไม่กล้าแก้เพราะกลัวไปกระทบส่วนอื่น — ปัญหานี้ไม่ได้เกิดกับคุณคนเดียว: ชื่อ class ที่ไม่บอกบทบาททำให้ทุกคนที่แตะโค้ดต่อ (รวมถึงตัวคุณเองในอนาคต) ต้องทำงานช้าลงและเสี่ยงแก้ผิดที่
- ต้องเปิด HTML ควบคู่ตลอดเวลาเพื่อเดาว่า class ใดอยู่กับ element ไหน
- ชื่อที่บอกหน้าตา (red, big-text) ล้าสมัยทันทีที่ดีไซน์เปลี่ยนสีหรือขนาด — แต่บทบาทของ element ไม่เปลี่ยน
- ชื่อที่ลงท้ายด้วยตัวเลข (box1, wrapper2) ไม่มีทางเดาได้ว่ามันคืออะไร และเพิ่มขึ้นโดยไร้ความหมาย
- เวลาใส่ rule ใหม่ก็ตั้งชื่อต่อไม่ถูก เพราะไม่รู้ว่าชื่อเดิมหมายถึงอะไร
2) หลักคิด: ตั้งชื่อ class ตามบทบาท ไม่ใช่ตามหน้าตา
class selector คือสะพานเชื่อมระหว่าง HTML กับ CSS: ชื่อใน attribute class ของ element ต้องตรงกับชื่อใน selector ของ rule ที่จะตกแต่งมัน — ยิ่งชื่อนั้นบอกบทบาทชัดเจนเท่าไร ไฟล์ CSS ก็ยิ่งอ่านได้โดยไม่ต้องเปิด HTML มาประกอบ กฎด้านล่างไม่ใช่ข้อบังคับของภาษา CSS (เบราว์เซอร์รับชื่ออะไรก็ได้ที่ไม่มีช่องว่าง) แต่เป็นแนวปฏิบัติที่ทีมใช้ร่วมกัน เพื่อให้โค้ดอ่านง่ายและบำรุงรักษาได้
กฎการตั้งชื่อ class ที่ดี
ตั้งชื่อตามบทบาท ไม่ใช่ตามหน้าตา
error-message ดีกว่า red-text — สีเปลี่ยนได้ตามธีม แต่บทบาท "ข้อความแจ้งเตือน" ไม่เปลี่ยน
ตัวพิมพ์เล็กทั้งหมด คั่นคำด้วย hyphen (-)
เขียนเป็น card-title, sidebar-nav — ไม่ใช้ CamelCase หรือ underscore ในชื่อ class
อ่านแล้วรู้ทันทีว่า element ทำหน้าที่อะไร
button-submit ดีกว่า btn และดีกว่า b1 — ถ้าต้องเดาหรือเปิดไฟล์อื่นประกอบ แสดงว่าชื่อยังไม่ดีพอ
อย่าใช้ตัวเลขต่อท้าย
box1, list2 ไม่ได้บอกอะไร — ถ้ามีของแบบเดียวกันหลายชิ้น ให้ชื่อบอกบทบาทต่างกัน เช่น card-product กับ card-course
ไม่ขึ้นต้นด้วยตัวเลขหรืออักขระพิเศษ
class ที่ขึ้นต้นด้วยตัวเลข (เช่น 1st-prize) CSS จะไม่รู้จัก — เบราว์เซอร์อ่าน selector ไม่ขึ้น
บทนี้ตัดสินใจกันที่คำถามเดียว: "ชื่อไหนสื่อบทบาทของ element ได้ตรงที่สุด" — ส่วนระบบตั้งชื่อเต็มรูปแบบสำหรับโปรเจกต์ใหญ่ อย่างการแบ่งชื่อเป็น block ส่วนประกอบ และสถานะ จะเป็นเรื่องของบทเรียนช่วงท้ายของ CSS track
3) เปรียบเทียบก่อน–หลัง: refactor ชื่อ class ของกล่องแจ้งเตือน
ดูตัวอย่างการ refactor จริง: กล่องแจ้งเตือนชุดหนึ่งที่ถูกเขียนขึ้นสองเวอร์ชัน — **ทายก่อนดูตัวอย่าง:** ทั้งสองฝั่งให้ผลลัพธ์บนหน้าจอเหมือนกันหรือต่างกัน? อ่าน CSS ทั้งสองฝั่งแล้วตอบไว้ก่อน แล้วค่อยดูคำตอบหลังตัวอย่าง
ก่อน refactor: ชื่อบอกหน้าตา vs หลัง refactor: ชื่อบอกบทบาท
rule ทั้งสองชุดให้สี ขนาด และพื้นหลังเหมือนกัน — ความต่างอยู่ที่การอ่านแล้วรู้บทบาทของ element โดยไม่ต้องเปิด HTML
.box1, .t1 และ .red ไม่สื่อว่าเป็นกล่อง หัวข้อ หรือข้อความ — ต้องเปิด HTML ทุกครั้งเพื่อไล่ดู
อ่านไฟล์ CSS ไฟล์เดียวก็เข้าใจโครงสร้าง: กล่องคำเตือนมีหัวข้อและข้อความของมันเอง
- เฉลยคำถามท้าย: ทั้งสองฝั่งแสดงผลเหมือนกันทุกประการ — ความต่างอยู่ที่ฝั่งขวาอ่านแล้วรู้บทบาทของ element โดยไม่ต้องเปิด HTML
- เวลา refactor ชื่อ class ต้องแก้ให้ตรงกันทั้งสองไฟล์: attribute class ใน HTML และ selector ใน CSS
- ชื่อใหม่ต้องคงความหมายเดิมของ rule — เราเปลี่ยนชื่อ ไม่ใช่เปลี่ยนสไตล์
- หลัง refactor ผลลัพธ์บนหน้าจอต้องไม่เปลี่ยน — ตรวจด้วย preview เสมอ
Lab 1 — ทำตาม: เปลี่ยนชื่อ class เป็นคำศัพท์จาก CSS ที่เตรียมไว้
ไฟล์ CSS เตรียม rule ของกล่องแจ้งเตือนไว้ครบแล้วพร้อมคอมเมนต์บอกบทบาทของแต่ละ rule — แต่ HTML ฝั่งซ้ายยังใช้ชื่อ .box1, .t1 และ .red ที่สื่ออะไรไม่ได้ ให้เปลี่ยน class ใน HTML ให้ตรงกับชื่อใน CSS ตามบทบาทของแต่ละ element
Lab 2 — ปรับ: สลับ class ที่ติดผิดที่กลับไปถูกบทบาท
ในกล่องแจ้งเตือนนี้ class สองตัวถูกสลับที่กัน: หัวข้อ "บันทึกการตั้งค่าสำเร็จ" กำลังใช้ .error-message ทำให้ข้อความสำเร็จเป็นสีแดงราวกับความผิดพลาด ส่วนคำอธิบายกลับใช้ .notice-title ที่ใหญ่และเขียวเกินไป ให้สลับ class ให้ตรงกับบทบาทของแต่ละ element โดยไม่แตะไฟล์ CSS
Lab 3 — แก้เอง: ตั้งชื่อ class ให้การ์ดสื่อด้วยตัวเอง
ไฟล์ CSS ด้านล่างเป็นคำศัพท์ของระบบดีไซน์ชุดหนึ่ง — rule ห้าตัวนี้ยังไม่มีใครใช้ เพราะ HTML ของการ์ดสื่อยังไม่ได้ใส่ class เลยสักตัว ให้อ่านบทบาทของแต่ละ element แล้วเลือกชื่อจาก CSS ที่สื่อบทบาทนั้นได้ตรงที่สุด
ตรวจความเข้าใจและก้าวต่อไป
ตอบคำถามสั้น ๆ เพื่อเช็กว่าคุณเลือกชื่อ class จากบทบาทของ element ได้ และแยกชื่อที่ดีออกจากชื่อที่บอกแค่หน้าตาได้หรือยัง
ตรวจความเข้าใจ: การตั้งชื่อ Class ที่ดี
class ใดต่อไปนี้ตั้งชื่อตามบทบาทของ element มากที่สุด?
ดีไซน์เปลี่ยนปุ่มสมัครสมาชิกจากสีเขียวเป็นสีม่วง — ชื่อ class ข้อใดจะทำให้คุณต้องแก้ HTML ด้วยโดยไม่จำเป็น?
ชื่อ class ใดต่อไปนี้เขียนตามกฎของบทเรียน (ตัวพิมพ์เล็ก คั่นคำด้วย hyphen) (เลือกทุกข้อที่ถูก)
เติมชื่อ class แบบ kebab-case สำหรับกล่องที่แจ้งเตือนว่าการเชื่อมต่อขาด: .____
- ตั้งชื่อ class ตามบทบาทของ element ไม่ใช่ตามหน้าตา — บทบาทไม่เปลี่ยนเมื่อดีไซน์เปลี่ยน
- ตัวพิมพ์เล็กทั้งหมด คั่นคำด้วย hyphen และอ่านแล้วรู้ทันทีว่า element ทำหน้าที่อะไร
- เวลา refactor ชื่อ class ต้องแก้ทั้ง HTML และ CSS ให้ตรงกัน และผลลัพธ์บนหน้าจอต้องไม่เปลี่ยน
- ก้าวต่อไป: ในบทถัดไป 'Content, Padding, Border, Margin' เราจะเริ่มเฟส Box Model — รู้ว่ากล่องของ element ประกอบด้วยชั้นอะไรบ้าง และกำหนดระยะห่างระหว่างกล่องอย่างไร (สมมติฐานความรู้ก่อนหน้า: เขียน class ใน HTML และเลือกชื่อที่สื่อบทบาทได้จากบทนี้ เพราะตัวอย่างในเฟส Box Model จะตั้งชื่อ class ตามหลักการเดียวกัน)