การจัด CSS ให้เป็นระเบียบด้วย BEM Methodology

เมื่อโปรเจกต์ CSS ของคุณเริ่มใหญ่ขึ้น การจัดการโค้ดให้เป็นระเบียบและง่ายต่อการบำรุงรักษาเป็นสิ่งสำคัญอย่างยิ่ง บทความนี้จะแนะนำ BEM Methodology (Block, Element, Modifier) ซึ่งเป็นแนวทางการตั้งชื่อ Class ที่ช่วยให้ CSS ของคุณมีความชัดเจน เป็นระบบ และนำกลับมาใช้ใหม่ได้ง่าย

ทำไมต้อง BEM?

ลองจินตนาการว่าคุณกำลังทำงานในโปรเจกต์ขนาดใหญ่ที่มีนักพัฒนาหลายคนร่วมงานกัน หากไม่มีมาตรฐานในการตั้งชื่อ Class อาจเกิดความสับสน ความซ้ำซ้อน และปัญหาในการแก้ไขโค้ดได้ BEM เข้ามาแก้ปัญหานี้ด้วยการกำหนดโครงสร้างที่ชัดเจน ทำให้โค้ดมีความสอดคล้องกันและง่ายต่อการเข้าใจ

ข้อดีของ BEM:

อ่านง่าย: ชื่อ Class สื่อความหมายชัดเจน ทำให้เข้าใจโครงสร้างของ HTML และ CSS ได้ง่าย
นำกลับมาใช้ใหม่ได้: โครงสร้างที่ชัดเจนทำให้สามารถนำ Block, Element หรือ Modifier ไปใช้ในส่วนอื่นๆ ของเว็บไซต์ได้อย่างง่ายดาย
บำรุงรักษาง่าย: การเปลี่ยนแปลง CSS จะส่งผลกระทบน้อยลง เนื่องจาก Class แต่ละตัวมีความเป็นอิสระต่อกัน
ทำงานร่วมกันง่าย: ช่วยให้ทีมพัฒนาสามารถทำงานร่วมกันได้อย่างมีประสิทธิภาพ เนื่องจากมีมาตรฐานเดียวกันในการตั้งชื่อ Class

BEM คืออะไร?

BEM ย่อมาจาก Block, Element, Modifier ซึ่งเป็นองค์ประกอบหลัก 3 ส่วนที่ใช้ในการตั้งชื่อ Class

Block: องค์ประกอบอิสระที่สามารถนำไปใช้ซ้ำได้ เช่น button, form, menu
Element: ส่วนประกอบย่อยของ Block ที่ไม่สามารถนำไปใช้โดยลำพังได้ เช่น button__text, menu__item
Modifier: สถานะหรือรูปแบบที่เปลี่ยนแปลง Block หรือ Element เช่น button--primary, menu__item--active

Block

Block คือองค์ประกอบหลักที่ทำหน้าที่เฉพาะอย่างในหน้าเว็บ คิดซะว่าเป็นส่วนประกอบที่ "ยืนได้ด้วยตัวเอง" ไม่ขึ้นกับบริบทอื่นมากนัก ตัวอย่างเช่น

button: ปุ่มกด
form: แบบฟอร์มสำหรับกรอกข้อมูล
menu: เมนูนำทาง
article: บทความ
header: ส่วนหัวของหน้าเว็บ
footer: ส่วนท้ายของหน้าเว็บ

หลักการตั้งชื่อ Block:

ใช้ชื่อที่สื่อความหมายและอธิบายหน้าที่ของ Block ได้ชัดเจน
ใช้ตัวอักษรภาษาอังกฤษตัวเล็กและคั่นด้วยเครื่องหมายขีด (-) หากมีหลายคำ
หลีกเลี่ยงการใช้ชื่อที่อิงกับตำแหน่งหรือลักษณะที่ปรากฏ (เช่น left-sidebar หรือ red-button) เพราะอาจทำให้ Block ไม่สามารถนำไปใช้ในบริบทอื่นได้

ตัวอย่าง:

<button class="button">Click me!</button>

<form class="form">
  <!-- ... ฟอร์ม ... -->
</form>

<nav class="menu">
  <!-- ... เมนู ... -->
</nav>

Element

Element คือส่วนประกอบย่อยของ Block ที่ไม่สามารถนำไปใช้โดยลำพังได้ Element จะขึ้นอยู่กับ Block และทำหน้าที่เฉพาะภายใน Block นั้น ตัวอย่างเช่น

button__text: ข้อความบนปุ่ม
form__input: ช่องสำหรับกรอกข้อมูลในฟอร์ม
menu__item: รายการในเมนู

หลักการตั้งชื่อ Element:

ใช้ชื่อ Block ตามด้วยเครื่องหมายขีดล่างสองตัว (__) และชื่อ Element
ใช้ชื่อที่สื่อความหมายและอธิบายหน้าที่ของ Element ได้ชัดเจน
ใช้ตัวอักษรภาษาอังกฤษตัวเล็กและคั่นด้วยเครื่องหมายขีด (-) หากมีหลายคำ

ตัวอย่าง:

<button class="button">
  <span class="button__text">Click me!</span>
</button>

<form class="form">
  <input type="text" class="form__input" placeholder="Your name">
</form>

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item"><a href="#">Home</a></li>
    <li class="menu__item"><a href="#">About</a></li>
    <li class="menu__item"><a href="#">Contact</a></li>
  </ul>
</nav>

Modifier

Modifier คือ Class ที่ใช้ปรับเปลี่ยนลักษณะหรือสถานะของ Block หรือ Element ตัวอย่างเช่น

button--primary: ปุ่มที่มีสีหลัก
menu__item--active: รายการเมนูที่กำลังถูกเลือก
form--error: ฟอร์มที่มีข้อผิดพลาด

หลักการตั้งชื่อ Modifier:

ใช้ชื่อ Block หรือ Element ตามด้วยเครื่องหมายขีดสองตัว (--) และชื่อ Modifier
ใช้ชื่อที่สื่อความหมายและอธิบายการเปลี่ยนแปลงที่เกิดขึ้น
ใช้ตัวอักษรภาษาอังกฤษตัวเล็กและคั่นด้วยเครื่องหมายขีด (-) หากมีหลายคำ

ตัวอย่าง:

<button class="button button--primary">Submit</button>

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item menu__item--active"><a href="#">Home</a></li>
    <li class="menu__item"><a href="#">About</a></li>
    <li class="menu__item"><a href="#">Contact</a></li>
  </ul>
</nav>

<form class="form form--error">
  <!-- ... ฟอร์มที่มีข้อผิดพลาด ... -->
</form>

ตัวอย่างการใช้งาน BEM แบบเต็มรูปแบบ

ลองพิจารณาตัวอย่างต่อไปนี้: เราต้องการสร้าง Card ที่แสดงข้อมูลสินค้า

<div class="card">
  <img class="card__image" src="product.jpg" alt="Product Image">
  <div class="card__content">
    <h2 class="card__title">Product Title</h2>
    <p class="card__description">Product description goes here.</p>
    <button class="card__button button button--primary">Add to Cart</button>
  </div>
</div>

ในตัวอย่างนี้:

card คือ Block หลัก
card__image, card__content, card__title, card__description, card__button คือ Elements ที่เป็นส่วนประกอบของ Card
button คือ Block อิสระที่นำมาใช้ใน Card
button--primary คือ Modifier ที่ปรับเปลี่ยนลักษณะของปุ่มให้เป็นสีหลัก

ข้อควรระวังและแนวปฏิบัติที่ดี

อย่าซ้อน Class: BEM เน้นความเรียบง่ายและหลีกเลี่ยงการซ้อน Class ใน CSS เช่น .card .card__title ควรใช้ .card__title โดยตรง
ความลึกของ Element: โดยทั่วไป ไม่ควรมี Element ที่ซ้อนกันเกิน 2 ระดับ (เช่น block__element__sub-element) หากจำเป็น อาจพิจารณาปรับโครงสร้าง HTML ใหม่
Consistency is Key: สิ่งสำคัญที่สุดคือการรักษาความสอดคล้องในการตั้งชื่อ Class ในทุกส่วนของโปรเจกต์

สรุป

BEM Methodology เป็นเครื่องมือที่มีประสิทธิภาพในการจัดระเบียบ CSS ให้เป็นระบบและง่ายต่อการบำรุงรักษา แม้ว่าอาจต้องใช้เวลาในการทำความเข้าใจและปรับตัวในช่วงแรก แต่ผลลัพธ์ที่ได้คือโค้ดที่อ่านง่าย นำกลับมาใช้ใหม่ได้ง่าย และช่วยให้ทีมพัฒนาทำงานร่วมกันได้อย่างมีประสิทธิภาพ ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับเครื่องมือสำหรับนักพัฒนา CSS (DevTools) ที่จะช่วยให้คุณ Debug และปรับแต่ง CSS ได้อย่างมืออาชีพ