การจัดการกับโค้ด CSS ที่มีขนาดใหญ่ และซับซ้อนอาจเป็นปัญหาสำหรับนักพัฒนาเว็บหลายคน โดยเฉพาะเมื่อโค้ดเหล่านั้นถูกใช้ในโปรเจคที่มีการขยายตัวอย่างต่อเนื่อง หรือมีการพัฒนากันหลายคน BEM CSS (Block, Element, Modifier) เป็นหนึ่งในวิธีที่ได้รับความนิยมในการช่วยจัดการกับความซับซ้อนนี้ โดยการจัดระเบียบโค้ดให้มีโครงสร้างที่ชัดเจน และง่ายต่อการเข้าใจ
BEM CSS คืออะไร?
BEM เป็นระบบการตั้งชื่อที่ออกแบบมาเพื่อช่วยให้นักพัฒนาสามารถจัดการกับโค้ด CSS ได้อย่างมีประสิทธิภาพ BEM แบ่งองค์ประกอบในหน้าเว็บออกเป็นสามส่วนหลัก ๆ คือ Block (บล็อก), Element (เอลิเมนต์) และ Modifier (มอดิไฟเออร์)
การตั้งชื่อใน BEM เน้นที่ความชัดเจน และสามารถเข้าใจได้ง่าย โดยการใช้ตัวเชื่อม (__ และ --) เพื่อสร้างความสัมพันธ์ระหว่าง Block (บล็อก), Element (เอลิเมนต์) และ Modifier (มอดิไฟเออร์) ตัวอย่างเช่น:
.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}Code language: CSS (css)หัวใจหลักของการเขียน BEM ก็คือ การเขียน selector เป็น .class ทั้งหมด ซึ่งเราจะไม่เขียนด้วย #id เพราะจะทำให้ไม่ยืดหยุ่น และไม่สามารถนำไปใช้งานต่อได้
Block (บล็อก)
Block คือองค์ประกอบหลักของหน้าเว็บ เช่น header, footer, หรือ menu Block เป็นหน่วยที่สามารถยืนอยู่ได้ด้วยตัวเอง และไม่ต้องพึ่งพาองค์ประกอบอื่นๆ ชื่อบล็อกใน BEM จะถูกตั้งชื่อด้วยรูปแบบ block-name
.header {}
.footer {}
.menu {}Code language: CSS (css)Element (เอลิเมนต์)
Element เป็นส่วนหนึ่งของ Block ที่ทำงานร่วมกับ Block เพื่อสร้างฟังก์ชันต่าง ๆ เช่น ปุ่มในเมนู หรือข้อความใน header Element จะต้องถูกตั้งชื่อในลักษณะที่เชื่อมโยงกับ Block เช่น block-name__element-name
.menu {}
.menu__item {}Code language: CSS (css)Modifier (มอดิไฟเออร์)
Modifier เป็นตัวกำหนดรูปแบบ หรือสถานะที่แตกต่างกันของ Block หรือ Element เช่น การเปลี่ยนสีของปุ่มเมื่อถูกกด Modifier จะถูกตั้งชื่อในลักษณะ block-name--modifier-name
.button {}
.button--active {}Code language: CSS (css)การนำ BEM CSS มาใช้ร่วมกับ SCSS หรือ SASS
ปัจจุบัน SCSS ถือเป็นเครื่องมือยอดนิยมที่นักพัฒนาเว็บที่ใช้ในการเขียน CSS เราสามารถนำ BEM มาปรับใช้ได้ตามนี้
.block {
/* CSS declarations for `.block` */
&__element {
/* CSS declarations for `.block__element` */
}
&--modifier {
/* CSS declarations for `.block--modifier` */
&__element {
/* CSS declarations for `.block--modifier__element` */
}
}
}Code language: SCSS (scss)ประโยชน์ของการใช้ BEM
ความเป็นระบบ และง่ายต่อการเข้าใจ
BEM ทำให้โค้ด CSS มีโครงสร้างที่ชัดเจน และเป็นระเบียบ ซึ่งช่วยให้การ Maintenance และปรับปรุงโค้ดในระยะยาวทำได้ง่ายขึ้น
การทำงานร่วมกันในทีม
การใช้ BEM ช่วยให้ทีมพัฒนาสามารถทำงานร่วมกันได้อย่างมีประสิทธิภาพมากขึ้น เนื่องจากทุกคนในทีมสามารถเข้าใจโครงสร้างของโค้ดได้อย่างชัดเจน และสามารถทำงานต่อจากกันได้ง่ายขึ้น
การเพิ่มความยืดหยุ่นในการออกแบบ
BEM ช่วยให้การออกแบบสามารถปรับเปลี่ยนได้ง่ายขึ้น เนื่องจากแต่ละ Block และ Element ถูกแยกจากกันอย่างชัดเจน และสามารถนำมาผสมผสาน หรือปรับใช้ได้อย่างยืดหยุ่น
ข้อควรระวัง
แม้ว่า BEM จะมีข้อดีอยู่มาก แต่ก็มีบางข้อที่ต้องระวัง เช่น ชื่อ class ที่อาจยาวเกินไปในบางกรณี และการบังคับใช้กฎ BEM ในโปรเจคขนาดใหญ่อาจเป็นเรื่องที่ท้าทาย
ตัวอย่างการใช้งาน BEM ในโปรเจคจริง
ตัวอย่างการสร้างเมนู ที่มีหนึ่งเมนูอยู่ในสถานะการถูกเลือกไว้
<nav class="menu">
<ul class="menu__list">
<li class="menu__item menu__item--active">Home</li>
<li class="menu__item">About</li>
<li class="menu__item">Contact</li>
</ul>
</nav>Code language: HTML, XML (xml).menu {
/* สไตล์สำหรับเมนู */
}
.menu__item {
/* สไตล์สำหรับรายการในเมนู */
}
.menu__item--active {
/* สไตล์สำหรับรายการที่ถูกเลือก */
}Code language: CSS (css)สรุป
การใช้ BEM CSS เป็นวิธีที่มีประสิทธิภาพในการจัดการกับโค้ด CSS ที่ซับซ้อน ช่วยให้โค้ดมีโครงสร้างที่ชัดเจน เป็นระบบ และง่ายต่อการเข้าใจ
แหล่งอ้างอิง:
