วิธีเขียน CSS แบบ Attribute Modules

วันนี้เราจะมาพูดถึงการเขียน CSS ในอีกรูปแบบหนึ่ง ที่จะใช้ HTML Attribute ในการกำหนดสไตล์แทนการใช้ Class แบบทั่วไป ลองมาดูว่าการเขียนแบบนี้จะมีข้อดีข้อเสียอย่างไรบ้าง ?

เมื่อ Element เต็มไปด้วย Class

ด้วยเหตุผลที่เราต้องการกำหนดสไตล์เพื่อให้สามารถนำมาใช้ซ้ำได้อีกในจุดอื่นๆ การตั้งชื่อ Class จึงมักจะเป็นชื่อกลางๆ แล้วอาศัยการใส่หลายๆ Class ที่ HTML Element แทน เพื่อให้สามารถแสดงผลได้ตามที่เราต้องการ ลองดูตัวอย่างการกำหนดสไตล์ให้กับปุ่มต่อไปนี้

จะเห็นว่าเราจำเป็นต้องใส่ Class ถึง 3 Class เลยทีเดียว เพื่อที่จะให้ Class เหล่านั้น นำไปใช้ต่อในส่วนอื่นๆ ได้ ปัญหาที่จะตามมาก็คือ เมื่อหน้าเว็บไซต์มีความซับซ้อนมากขึ้น การจะมาไล่โค้ดในภายหลังก็อาจจะไม่สะดวกเท่าไร หากทุกๆ HTML Element เต็มไปด้วย Class ที่ถูก Normalize มาแบบนี้

รู้จักกับ Attribute Modules

Attribute Modules (AM) นั้นเป็นชื่อเรียกเทคนิคที่จะใช้ HTML Attribute ในการกำหนดสไตล์แทนการใช้ Class ซึ่งการเขียนด้วยวิธีนี้จะช่วยให้อ่านโค้ดได้ง่ายกว่าเพราะมันจะเป็นการแยกกลุ่มของสไตล์ออกจากกันอย่างชัดเจนมากขึ้น ลองมาดูตัวอย่างเดิม แต่เปลี่ยนมาเขียนด้วยวิธี Attribute Modules แทน

ในส่วนของ CSS Rule เราก็จะต้องเปลี่ยนมาใช้ Attribute Selector แทน Class Selector แบบนี้

จะเห็นว่าการเขียนด้วยวิธี Attribute Modules นั้นช่วยให้โค้ด HTML สั้นลงและอ่านเข้าใจง่ายขึ้นมาก

จะเห็นว่าเราจะต้องใส่ “~” เข้าไปข้างหน้า “=” ในการเขียน Attribute Selector ด้วย ไม่งั้นมันจะ match ไม่เจอ หาก Attribute นั้นมี Value อื่นๆ ใส่อยู่ด้วย

การประยุกต์ใช้กับ Grid

เราอาจนำ Attribute Modules มาประยุกต์ใช้กับ Grid ก็ได้ โดยปกติแล้ว เวลาเราจะใช้ Grid เราก็จะกำหนด Class เอาไว้ที่ HTML Element แบบนี้

แต่ในการใช้งานจริงๆ แล้ว HTML Element อาจจะมี Class อื่นๆ อยู่ด้วย แบบนี้

เราอาจลองเปลี่ยนมากำหนด Grid โดยใช้ Attribute Modules โค้ดเราก็จะได้แบบนี้

จากตัวอย่างนี้ เราจะเห็นชัดเจนมากขึ้นว่า .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/

(Visited 4,980 times, 1 visits today)

7 Responses to “วิธีเขียน CSS แบบ Attribute Modules”

  1. อืมน่าสนใจเพิ่งรู้ว่าทำได้ด้วย

  2. (y) อ่านง่ายสะอาดตาดี

  3. CSS แบบ Attribute Modules
    เราอ่านง่าย เพื่อนอ่านสบาย เฮ้

  4. ช้ากว่าจริงครับ
    ถ้าวัดจาก Ops/sec จะเห็นว่าต่างกันพอสมควรเลย
    แต่พอใช้งานจริงอาจจะไม่ต่างกันมากจนเห็นได้ชัดครับ
    สุดท้ายแล้ว ถ้าจะเน้น performance จริงๆ ยังไงก็คงต้องใช้ class แบบเดิมครับ

  5. เนื้อหาน่าสนใจมากครับ

Leave a Reply