Tìm hiểu về BEM và cách sử dụng

BEM, viết tắt của Block, Element, Modifier, là một phương pháp đặt tên lớp CSS giúp quản lý và tổ chức mã CSS một cách cấu trúc và dễ bảo trì. Phương pháp này được phát triển bởi Yandex và đã trở thành một trong những tiêu chuẩn phổ biến trong cộng đồng phát triển web để tạo ra các thành phần có thể tái sử dụng và dễ dàng bảo trì

Khái niệm cơ bản của BEM

Block

Block là thành phần cấp cao nhất trong BEM, đại diện cho một đối tượng độc lập trên trang web. Một block có thể là một header, footer, sidebar, hoặc bất kỳ thành phần lớn nào khác. Block được thiết kế để có thể tồn tại độc lập mà không phụ thuộc vào các thành phần khác trên trang

Ví dụ về block:

<div class="header"></div>

Element

Element là một phần của block, không thể tồn tại độc lập mà phải trong một block. Element đại diện cho các thành phần con bên trong block, như nút, liên kết, hoặc tiêu đề trong một header[2].

Ví dụ về element:

<div class="header">
  <div class="header__logo"></div>
</div>

Modifier

Modifier là một biến thể hoặc trạng thái của một block hoặc element. Nó được sử dụng để tạo các kiểu biến thể, như một nút màu đỏ hoặc một header có nền đậm.

Ví dụ về modifier:

<div class="button button--red"></div>

Lợi ích của việc sử dụng BEM

1. Tái sử dụng: BEM giúp phát triển các thành phần có thể tái sử dụng, giảm thiểu sự lặp lại và tăng cường tính nhất quán trên trang web.
2. Bảo trì: Cấu trúc rõ ràng và quy ước đặt tên giúp dễ dàng bảo trì và cập nhật mã nguồn.
3. Phát triển độc lập: Các nhà phát triển có thể làm việc độc lập trên các thành phần khác nhau mà không ảnh hưởng đến nhau.

Ví dụ thực tế về BEM

Giả sử bạn đang xây dựng một trang web bán hàng và cần một thanh tìm kiếm với các biến thể. Dưới đây là cách bạn có thể sử dụng BEM để cấu trúc mã HTML và CSS của mình:

HTML

<div class="search">
  <input type="text" class="search__input">
  <button class="search__button search__button--primary"></button>
</div>

CSS

.search {}
.search__input {
  padding: 8px;
  border: 1px solid #ccc;
}
.search__button {
  padding: 8px 16px;
  background-color: #eee;
  border: none;
  cursor: pointer;
}
.search__button--primary {
  background-color: #007BFF;
  color: #ffffff;
}

Trong ví dụ này, .search là block, .search__input và .search__button là các element, và .search__button--primary là modifier cho button, thể hiện nút chính trong giao diện.

Kết luận

BEM là một phương pháp hữu ích và mạnh mẽ để tổ chức CSS, giúp các nhà phát triển web dễ dàng quản lý và bảo trì mã nguồn của mình. Bằng cách áp dụng BEM, bạn có thể tạo ra các thành phần rõ ràng, có thể tái sử dụng và dễ dàng thích ứng với các thay đổi trong dự án.