Search
Close this search box.
BEM CSS คืออะไร พร้อมวิธีการใช้

ทำความรู้จักกับ BEM CSS ระบบการตั้งชื่อที่ช่วยจัดระเบียบโค้ด CSS

Last updated on 2 months ago,
1 mins read

การจัดการกับโค้ด 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 ที่ซับซ้อน ช่วยให้โค้ดมีโครงสร้างที่ชัดเจน เป็นระบบ และง่ายต่อการเข้าใจ

แหล่งอ้างอิง:

Tagged with:
ผู้เขียน
Danai Phianphutthikorn
Founder, Writer, Designer, Videography, YouTuber

บทความที่เกี่ยวข้อง

สำหรับเพื่อนๆ ที่กำลังมองหา Code Editor อยู่แล้วละก็ ต้องไม่พลาดบทความนี้ครับ เพราะผมได้รวบรวม Code Editor ยอดนิยมมาฝากเพื่อนๆ กัน แถมใช้ได้ฟรีอีกต่างหาก
Last Updated on 2 months ago
มาทำความรู้จักกับ ads.txt เครื่องมือตรวจสอบ และป้องกันการถูกปลอมแปลงข้อมูล ที่จะช่วยให้เราไม่เสียรายได้ไปจาก Ad Fraud หรือการโกงโฆษณาครับ
Last Updated on 2 months ago
รู้หรือไม่ว่า CDN สามารถทำให้เว็บไซต์ของคุณโหลดเร็วขึ้น และปลอดภัยยิ่งขึ้นได้? มาดูกันว่า CDN คืออะไร มีประโยชน์อย่างไร?
Last Updated on 2 months ago
ทำความรู้จักกับ Error Code ที่พบบ่อยบนเว็บไซต์ พร้อมวิธีแก้ไขเบื้องต้น เพื่อช่วยให้เว็บไซต์ของเราทำงานได้ราบรื่นและเพิ่มประสบการณ์การใช้งานที่ดีให้กับผู้ใช้
Last Updated on 2 months ago
บทความนี้เราจะไปทำความรู้จักความแตกต่าง และวิธีการเลือกใช้ CSS Units ได้อย่างเหมาะสม เพื่อให้การออกแบบเว็บสวยงาม ตอบสนองได้กับทุกอุปกรณ์
Last Updated on 2 months ago