BEM (Block Element Modifier) là một phương pháp đặt tên class CSS giúp code dễ đọc, dễ bảo trì và dễ mở rộng. Đây là quy ước được sử dụng rộng rãi trong cộng đồng Frontend, đặc biệt khi làm việc nhóm hoặc phát triển các dự án lớn.
Tại CODE TOT, chúng tôi áp dụng BEM trong tất cả dự án WordPress theme và landing page. Phương pháp này giúp đội ngũ 6+ developer có thể làm việc trên cùng một dự án mà không bị xung đột CSS, không cần lo lắng về việc class bị chồng chéo.
Bài viết này được cập nhật năm 2026 để phản ánh các practice mới nhất khi làm việc với BEM trong PostCSS, SCSS và các framework hiện đại.
BEM là gì?
BEM viết tắt của Block – Element – Modifier:
- Block: Thành phần độc lập, có ý nghĩa riêng (ví dụ:
.header,.menu,.button) - Element: Thành phần con của Block, không có ý nghĩa khi đứng một mình (ví dụ:
.menu__item,.header__logo) - Modifier: Biến thể của Block hoặc Element (ví dụ:
.button--large,.menu__item--active)
Cú pháp BEM cơ bản
.block {}.block__element {}.block--modifier {}.block__element--modifier {}Ví dụ thực tế với một card sản phẩm:
.product-card {} /* Block */.product-card__image {} /* Element */.product-card__title {} /* Element */.product-card__price {} /* Element */.product-card--featured {} /* Modifier */.product-card__price--sale {} /* Element + Modifier */BEM trong HTML
<div class="product-card product-card--featured"> <img class="product-card__image" src="product.jpg" alt=""> <h3 class="product-card__title">Tên sản phẩm</h3> <p class="product-card__price product-card__price--sale">500.000đ</p></div>BEM với PostCSS (2026)
Khi dùng PostCSS với CSS Nesting spec, bạn có thể viết BEM gọn hơn:
.product-card { /* Block styles */ &__image { /* .product-card__image */ width: 100%; } &__title { font-size: 1.25rem; } &--featured { /* .product-card--featured */ border: 2px solid gold; }}Lưu ý: Khi dùng PostCSS với postcss-preset-env (CSS Nesting spec), không dùng &__element — thay vào đó viết đầy đủ .block__element hoặc dùng SCSS nếu muốn shorthand.
Khi nào nên dùng BEM?
- Dự án có nhiều developer cùng làm
- Component-based architecture (React, Vue, WordPress Blocks)
- Dự án không dùng CSS-in-JS hoặc utility-first framework
- Cần maintain CSS lâu dài
BEM vs các phương pháp khác
- BEM: Rõ ràng, dự đoán được, hơi dài tên class
- Utility-first (Tailwind): Nhanh, ít code CSS, nhưng HTML dày
- CSS Modules: Tự động scoped, phù hợp React/Next.js
- Atomic CSS: Class nhỏ, tái sử dụng cao, khó đọc
Lưu ý khi áp dụng BEM
- Không nest BEM quá sâu — một element không nên chứa element khác (
.block__element1__element2là sai) - Modifier chỉ thay đổi style, không thêm hành vi JavaScript
- Luôn dùng BEM kết hợp với namespace nếu làm theme WordPress (ví dụ:
.ct-button)
