นักพัฒนาชื่นชอบความสะดวกและหลักสรีรศาสตร์ของ .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

Inewgen

#Web Design

CSS-Tricks ชวนมองอนาคต CSS Class Prefix Selector

Inewgen