วิธีเขียน CSS แบบ Attribute Modules
วันนี้เราจะมาพูดถึงการเขียน CSS ในอีกรูปแบบหนึ่ง ที่จะใช้ HTML Attribute ในการกำหนดสไตล์แทนการใช้ Class แบบทั่วไป ลองมาดูว่าการเขียนแบบนี้จะมีข้อดีข้อเสียอย่างไรบ้าง ?
เมื่อ Element เต็มไปด้วย Class
ด้วยเหตุผลที่เราต้องการกำหนดสไตล์เพื่อให้สามารถนำมาใช้ซ้ำได้อีกในจุดอื่นๆ การตั้งชื่อ Class จึงมักจะเป็นชื่อกลางๆ แล้วอาศัยการใส่หลายๆ Class ที่ HTML Element แทน เพื่อให้สามารถแสดงผลได้ตามที่เราต้องการ ลองดูตัวอย่างการกำหนดสไตล์ให้กับปุ่มต่อไปนี้
<a class="btn btn--info btn--large">Large information button</a>.btn { /* สไตล์ของปุ่มทั่วไป */ }
.btn--info { /* สไตล์ของปุ่มแบบให้ข้อมูล */ }
.btn--large { /* สไตล์ของปุ่มขนาดใหญ่ */ }
จะเห็นว่าเราจำเป็นต้องใส่ Class ถึง 3 Class เลยทีเดียว เพื่อที่จะให้ Class เหล่านั้น นำไปใช้ต่อในส่วนอื่นๆ ได้ ปัญหาที่จะตามมาก็คือ เมื่อหน้าเว็บไซต์มีความซับซ้อนมากขึ้น การจะมาไล่โค้ดในภายหลังก็อาจจะไม่สะดวกเท่าไร หากทุกๆ HTML Element เต็มไปด้วย Class ที่ถูก Normalize มาแบบนี้
รู้จักกับ Attribute Modules
Attribute Modules (AM) นั้นเป็นชื่อเรียกเทคนิคที่จะใช้ HTML Attribute ในการกำหนดสไตล์แทนการใช้ Class ซึ่งการเขียนด้วยวิธีนี้จะช่วยให้อ่านโค้ดได้ง่ายกว่าเพราะมันจะเป็นการแยกกลุ่มของสไตล์ออกจากกันอย่างชัดเจนมากขึ้น ลองมาดูตัวอย่างเดิม แต่เปลี่ยนมาเขียนด้วยวิธี 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 อื่นๆ ใส่อยู่ด้วย
การประยุกต์ใช้กับ Grid
เราอาจนำ Attribute Modules มาประยุกต์ใช้กับ Grid ก็ได้ โดยปกติแล้ว เวลาเราจะใช้ Grid เราก็จะกำหนด Class เอาไว้ที่ HTML Element แบบนี้
<div class="row">
<div class="column-8">Main</div>
<div class="column-4">Sidebar</div>
</div>แต่ในการใช้งานจริงๆ แล้ว HTML Element อาจจะมี Class อื่นๆ อยู่ด้วย แบบนี้
<div class="row">
<div class="column-8 main">Main</div>
<div class="column-4 sidebar">Sidebar</div>
</div>เราอาจลองเปลี่ยนมากำหนด Grid โดยใช้ Attribute Modules โค้ดเราก็จะได้แบบนี้
<div am-Row>
<div am-Column="8" class="main">Main</div>
<div am-Column="4" class="sidebar">Sidebar</div>
</div>[am-Row] { }
[am-Column~="1"] { }
[am-Column~="2"] { }
[am-Column~="3"] { }
.
.
.
[am-Column~="12"] { }
จากตัวอย่างนี้ เราจะเห็นชัดเจนมากขึ้นว่า .main นั้นมีความกว้าง 8 คอลัมน์ ส่วน .sidebar นั้นมีความกว้าง 4 คอลัมน์ จริงๆ แล้ว เราสามารถใช้ Attribute Modules ได้มากกว่าหนึ่งที่ใน HTML Element เดียวกัน สุดท้ายแล้วก็ขึ้นอยู่กับการวางแผนในการเขียนโค้ดของเรานั่นเอง
ในการใช้ Attribute Mobules นั้น ปกติแล้วเราจะใส่ prefix เป็น am-* แต่จริงๆ แล้ว เราจะใช้เป็น data-* หรืออะไรก็ได้
บทสรุปการใช้ Attribute Modules
จะว่าไปแล้ว การใช้ Attribute Modules นั้นก็เหมือนกับการแยก Class ที่กองอยู่รวมกันออกมาเป็นกลุ่มๆ เพื่อทำให้เราสามารถแยกแยะได้ง่ายขึ้นว่าแต่ละ Element นั้นมีลักษณะอย่างไร จริงๆ แล้ว การใช้ Attribute Modules นั้นยังสามารถนำไปประยุกต์ใช้ได้หลากหลาย ขึ้นอยู่กับความถนัดในการเขียนโค้ดของแต่ละคน
อย่างไรก็ตาม การใช้ Attribute Modules นั้นก็อาจมีข้อเสียอยู่บ้างในเรื่องของ performance เพราะ CSS Selector ที่ใช้นั้นจะเป็น Attribute Selector ซึ่งแน่นอนว่ามันจะใช้เวลาในการ match มากกว่า Class Selector อย่างแน่นอน แต่ความต่างตรงนี้อาจจะสัมผัสแทบไม่ได้ เพราะ web browser ในปัจจุบันได้พัฒนาให้ประมวลผลได้เร็วขึ้นมากแล้ว
หากเราไม่ซีเรียสเรื่อง performance มากนัก เราอาจลองหันมาใช้ Attribute Modules ดูก็ได้ เพราะหากออกแบบดีๆ แล้วล่ะก็ มันก็น่าจะช่วยให้งานเราเสร็จเร็วขึ้นได้เหมือนกัน แต่หากใครยังกังวลเรื่อง performance อยู่บ้าง เราก็อาจจะลองใช้แค่บางส่วนดูก่อน เช่น grid หรือ component ต่างๆ เป็นต้น หรืออาจจะลองใช้กับงานที่มีขนาดไม่ใหญ่มากนักดูก่อนก็ได้
สามารถอัพเดทข่าวสารเกี่ยวกับ AMCSS ได้ที่เว็บหลัก http://amcss.github.io/
