1. BEM Là Gì?

BEM viết tắt của Block - Element - Modifier là phương pháp đặt tên class trong CSS do Yandex phát triển nhằm giải quyết vấn đề xung đột CSS trong các dự án lớn.

2. Cấu Trúc BEM Chuẩn

  • Block (Khối độc lập): Đại diện cho một thành phần giao diện độc lập (.btn, .card, .header).
  • Element (Phần tử con): Nằm bên trong Block và phụ thuộc vào Block (.card__title, .card__image).
  • Modifier (Biến thể trạng thái): Biểu thị trạng thái hoặc kiểu dáng khác nhau (.btn--primary, .btn--disabled).
/* Ví dụ Card BEM */
.service-card { /* Block */ }
.service-card__title { /* Element */ }
.service-card__price { /* Element */ }
.service-card--featured { /* Modifier */ }

3. Lợi Ích Của BEM

  • Triệt tiêu hoàn toàn việc dùng !important để override CSS.
  • Tên class mang ý nghĩa ngữ nghĩa rõ ràng, người mới vào dự án đọc hiểu ngay.

🛠️ Hạ tầng hỗ trợ dev: Triển khai website của bạn trên Cloud VPS hoặc Hosting ThueCloud!