BEM (Block Element Modifier) là gì?

BEM là quy ước đặt tên class để một class nói rõ nó thuộc component nào và đóng vai gì.

<article class="card card--featured">
  <h3 class="card__title">Tiêu đề</h3>
  <p  class="card__desc">Mô tả</p>
  <button class="card__btn card__btn--ghost">Xem</button>
</article>

.card { }                  /* Block: component đứng độc lập */
.card__title { }           /* Element: bộ phận, không tồn tại ngoài block */
.card--featured { }        /* Modifier: biến thể của block */
.card__btn--ghost { }      /* Modifier của element */

Cái nó giải quyết: selector lồng sâu (.sidebar .card h3 span) rất dễ vỡ khi đổi cấu trúc DOM, và specificity leo thang không kiểm soát. BEM giữ mọi selector ở một class duy nhất, specificity phẳng, ghi đè dễ đoán.

Lưu ý 1 — không có block__el1__el2. Element không lồng tên. Card chứa avatar thì viết .card__avatar, không phải .card__header__avatar; sâu hơn nữa thì đó nên là một block riêng.

Lưu ý 2 — modifier phải đi kèm block. class="card--featured" mà thiếu card là sai; modifier chỉ thêm thay đổi lên base.

Khi nào không cần BEM: dự án dùng CSS Modules, styled-components hoặc Tailwind đã có cơ chế cô lập riêng — thêm BEM lên đó chỉ làm tên dài ra mà không giải quyết thêm gì.