Attribute Modules (AM) นั้นเป็นชื่อเรียกเทคนิคที่จะใช้ HTML Attribute ในการกำหนดสไตล์แทนการใช้ Class ซึ่งการเขียนด้วยวิธีนี้จะช่วยให้อ่านโค้ดได้ง่ายกว่าเพราะมันจะเป็นการแยกกลุ่มของสไตล์ออกจากกันอย่างชัดเจนมากขึ้น
ลองมาดูตัวอย่าง
<a class="btn btn--info btn--large">Large information button</a>
.btn { /* สไตล์ของปุ่มทั่วไป */ }
.btn--info { /* สไตล์ของปุ่มแบบให้ข้อมูล */ }
.btn--large { /* สไตล์ของปุ่มขนาดใหญ่ */ }
แต่เปลี่ยนมาเขียนด้วยวิธี Attribute Modules แทน
<a am-Button="info large">Large information button</a>
ในส่วนของ CSS Rule เราก็จะต้องเปลี่ยนมาใช้ Attribute Selector แทน Class Selector แบบนี้
[am-Button] { /* สไตล์ของปุ่มทั่วไป */ }
[am-Button~="information"] { /* สไตล์ของปุ่มแบบให้ข้อมูล */ }
[am-Button~="large"] { /* สไตล์ของปุ่มขนาดใหญ่ */ }
จะเห็นว่าการเขียนด้วยวิธี Attribute Modules นั้นช่วยให้โค้ด HTML สั้นลงและอ่านเข้าใจง่ายขึ้นมาก
จะเห็นว่าเราจะต้องใส่ “~” เข้าไปข้างหน้า “=” ในการเขียน Attribute Selector ด้วย ไม่งั้นมันจะ match ไม่เจอ หาก Attribute นั้นมี Value อื่นๆ ใส่อยู่ด้วย
ในการใช้ Attribute Mobules นั้น ปกติแล้วเราจะใส่ prefix เป็น am-* แต่จริงๆ แล้ว เราจะใช้เป็น data-* หรืออะไรก็ได้
จะว่าไปแล้ว การใช้ Attribute Modules นั้นก็เหมือนกับการแยก Class ที่กองอยู่รวมกันออกมาเป็นกลุ่มๆ เพื่อทำให้เราสามารถแยกแยะได้ง่ายขึ้นว่าแต่ละ Element นั้นมีลักษณะอย่างไร จริงๆ แล้ว การใช้ Attribute Modules นั้นยังสามารถนำไปประยุกต์ใช้ได้หลากหลาย ขึ้นอยู่กับความถนัดในการเขียนโค้ดของแต่ละคน
อย่างไรก็ตาม การใช้ Attribute Modules นั้นก็อาจมีข้อเสียอยู่บ้างในเรื่องของ performance เพราะ CSS Selector ที่ใช้นั้นจะเป็น Attribute Selector ซึ่งแน่นอนว่ามันจะใช้เวลาในการ match มากกว่า Class Selector อย่างแน่นอน แต่ความต่างตรงนี้อาจจะสัมผัสแทบไม่ได้ เพราะ web browser ในปัจจุบันได้พัฒนาให้ประมวลผลได้เร็วขึ้นมากแล้ว
อ้างอิง
---http://www.softmelt.com/article.php?id=457---
อ้างอิง
---http://www.softmelt.com/article.php?id=457---