CSS-Tricks ชวนมองอนาคต CSS Class Prefix Selector
บทวิเคราะห์ CSS Class Prefix Selector ตัวเลือกใหม่ที่ใช้งานสะดวกกว่า substring selector เดิม พร้อมแนวคิดการเขียนโค้ดที่สั้นกระชับขึ้น
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- นักพัฒนาชื่นชอบความสะดวกและหลักสรีรศาสตร์ของ .prefix-*
- ดีกว่า substring selector แบบเดิมอย่าง class^="prefix" และ class*=ฝฝprefixฝฝ ที่อ่านยากกว่า
- ไม่ต้องเพิ่มขั้นตอนใน HTML เหมือนกับการใช้ [data-attribute] selectors
- รองรับการเขียนในรูปแบบ nested syntax ได้อย่างลงตัว
ในวงการพัฒนาเว็บไซต์ การเลือกใช้งาน CSS selector ให้มีประสิทธิภาพและอ่านง่ายถือเป็นเรื่องสำคัญ ล่าสุดทาง CSS-Tricks ได้หยิบยกประเด็นที่น่าสนใจเกี่ยวกับแนวคิดการใช้งาน CSS Class Prefix Selector ซึ่งเข้ามาช่วยเพิ่มความสะดวกสบายให้กับนักพัฒนา front-end เป็นอย่างมาก
เมื่อเปรียบเทียบกับ substring selector แบบเดิมที่มีอยู่แล้วอย่าง class^="prefix" หรือ class*=ฝฝprefixฝฝ จะพบว่ามีความยาวและอ่านยากกว่าการใช้ .prefix-* แบบสั้นๆ อย่างเห็นได้ชัด นอกจากนี้ยังแก้ปัญหาความยุ่งยากแบบเดียวกับการใช้ [data-attribute] selectors ที่ต้องไปแก้ไขโค้ด HTML เพิ่มเติมและทำให้โค้ดยาวขึ้นไปอีก
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
แม้ว่าการปรับแต่งในบางกรณีเฉพาะเจาะจงอาจทำได้ลึกซึ้งกว่า แต่ผู้เขียนบทความมองว่าแนวทางนี้ให้ความยืดหยุ่นที่ใกล้เคียงกับสิ่งที่เกือบจะมีใช้งานได้จริงในปัจจุบัน และมีความคล้ายคลึงกับการขยายความสามารถของฟังก์ชันสีให้สั้นลง
การใช้เครื่องหมาย Wildcard (*) ในการเลือก Class มีข้อจำกัดสำคัญคือมันจะไม่ไปแมตช์กับเงื่อนไขอื่นหรือกรณีที่ไม่มีขีดคั่น (non-dashed cases) ดังนั้นนักพัฒนาจึงต้องระมัดระวังโครงสร้างการตั้งชื่อ (naming convention) เพื่อไม่ให้เกิดข้อผิดพลาดในการแสดงผลหน้าเว็บไซต์
นอกจากนี้ รูปแบบดังกล่าวยังดูน่าสนใจมากยิ่งขึ้นเมื่อนำมาใช้งานร่วมกับ nested syntax ทำให้โครงสร้างชุดคำสั่งมีความเป็นระเบียบและจัดการได้ง่ายขึ้นในภาพรวม
ท้ายที่สุดแล้ว แม้ว่าแนวคิดนี้อาจจะยังต้องอาศัยการพิจารณาเพิ่มเติมในเชิงลึก แต่ความสะดวกสบายที่เพิ่มเข้ามาก็เพียงพอที่จะทำให้นักพัฒนาหลายคนรู้สึกอยากลองใช้งานจริงในโปรเจกต์ถัดไป
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น