B.E.M – Nguyên tắc đặt tên class CSS bước đầu giúp bạn trở thành "phù thủy giao diện"

Bạn là sinh viên IT đang lập trình một dự án web cá nhân đầu tiên, bạn bị cuốn vào vòng xoáy style không ngừng nghỉ vì hiển thị lên được từng phần giao diện đẹp mà mình làm thật là thích😮. Và đến khi muốn style lại thì tìm vị trí trong code như mò kim đáy bể vì tên class không có ý nghĩa.
👉️Chậm lại và B.E.M sẽ giúp bạn ✅️

🌱 B.E.M là gì?

B.E.M là viết tắt của Block - Element - Modifier – một phương pháp đặt tên class CSS giúp code rõ ràng, có tổ chức và dễ bảo trì. Nó được phát triển bởi Yandex – một công ty công nghệ của Nga – để giải quyết vấn đề style CSS bị rối khi dự án lớn dần lên.

🔧 Cấu trúc cơ bản

.block {}
.block__element {}
.block--modifier {}

Trong B.E.M, chúng ta có ba thành phần chính:

• Block (Khối): Thành phần độc lập, có thể hiểu là một module hoặc component trong giao diện. Ví dụ: menu, header, footer.
• Element (Phần tử): Thành phần con bên trong Block, không thể tồn tại độc lập. Ví dụ: menu__item, header__logo.
• Modifier (Biến thể): Biến thể của Block hoặc Element, thể hiện trạng thái hoặc kiểu dáng khác. Ví dụ: button--disabled, menu__item--active.

Quy ước đặt tên:

• Block: .block
• Element: .block__element
• Modifier: .block--modifier hoặc .block__element--modifier

🧩 Ví dụ thực tế

Giả sử chúng ta có một component button với các trạng thái khác nhau:

<button class="button">Nút cơ bản</button>
<button class="button button--primary">Nút chính</button>
<button class="button button--disabled">Nút vô hiệu</button>

Trong đó:

• .button: Định nghĩa chung cho tất cả các nút.
• .button--primary: Biến thể của nút, thể hiện nút chính.
• .button--disabled: Biến thể của nút, thể hiện nút trạng thái vô hiệu.

📖Đặc biệt hơn khi dùng SCSS
CSS Style:

.button{...}
.button--primary{...}
.button--disabled{...}

SCSS Style:

.button{ &--primary{...}, &--disabled{...}
}

👉️Trông rất dễ nhìn và dễ quản lý phải không 😁

🚀 Lợi ích khi dùng B.E.M

✅ Code rõ ràng, dễ đọc – chỉ cần nhìn tên class là biết nó nằm ở đâu, có vai trò, nhiệm vụ gì.
✅ Giảm xung đột CSS – tránh trùng tên class giữa các component.
✅ Dễ bảo trì và mở rộng – thêm hoặc chỉnh sửa mà không phá vỡ cấu trúc cũ.
✅ Hợp với team – đặc biệt hiệu quả, giúp mọi người có tiếng nói chung và hiểu cách làm của nhau khi làm việc nhóm hoặc dự án lớn.

📌 Kết luận

• Ở bài này mình đã trình bày cơ bản về khái niệm và cách áp dụng B.E.M trong lập trình CSS, SCSS. Mong rằng bài viết sẽ giúp các bạn phần nào hiểu được vai trò quan trọng của nguyên tắc này 😁.
• Hãy chia sẻ nguyên tắc B.E.M với bạn bè của bạn để cùng luyện code nhé !

💬 Chúc các bạn áp dụng hiệu quả. Có tips hay cùng chia sẻ dười bình luận nhé 🤟