Back to blog

Feb 09, 2025

Tối Ưu Hóa CSS với Kỹ Thuật BEM (Block, Element, Modifier)

PH

Phineas

@Phineas

cover

CSS là một công cụ mạnh mẽ, nhưng khi dự án phát triển lớn hơn, việc quản lý và tổ chức CSS có thể trở thành thách thức. Các vấn đề thường gặp bao gồm:

  • Class trùng lặp: Khó khăn trong việc quản lý và duy trì các class CSS, dẫn đến các xung đột.
  • Tính kế thừa không mong muốn: CSS đôi khi ảnh hưởng không đúng mục tiêu, gây khó khăn khi muốn thay đổi.
  • Khả năng mở rộng hạn chế: Khi dự án lớn dần, CSS không có cấu trúc rõ ràng sẽ gây khó khăn cho việc mở rộng.

Kỹ thuật BEM (Block, Element, Modifier) ra đời để giải quyết những vấn đề này, giúp chúng ta tổ chức CSS một cách rõ ràng, dễ hiểu và dễ bảo trì hơn.

1. BEM là gì?

BEM là một quy ước đặt tên class CSS, giúp chia nhỏ giao diện thành các thành phần (component) có cấu trúc rõ ràng và tránh sự xung đột giữa các class.

BEM viết tắt cho:

  • Block: Một thành phần độc lập, đại diện cho một phần riêng biệt của giao diện (ví dụ: menu, header, footer).
  • Element: Một phần tử con thuộc về Block, không thể tồn tại độc lập mà phải nằm trong Block (ví dụ: menu__item, header__title).
  • Modifier: Sử dụng để thay đổi trạng thái hoặc ngoại hình của Block hoặc Element (ví dụ: menu__item--active, header--large).

2. Cấu trúc và quy tắc đặt tên trong BEM

Cấu trúc của BEM rất đơn giản, nhưng mang lại hiệu quả lớn trong việc tổ chức CSS. Hãy xem cách đặt tên cho từng phần:

Block

Block là một thành phần độc lập trong giao diện.

html
<div class="menu"></div>
css
.menu {
  background-color: #fff;
  padding: 10px;
}

Element

Element là một phần tử con của Block, sử dụng hai dấu gạch dưới __ để biểu diễn mối quan hệ với Block.

html
<div class="menu">
  <div class="menu__item">Home</div>
  <div class="menu__item">About</div>
</div>
css
.menu__item {
  color: #333;
  padding: 5px 10px;
}

Modifier

Modifier là một trạng thái hoặc biến thể của Block hoặc Element, được sử dụng với hai dấu gạch nối --.

html
<div class="menu">
  <div class="menu__item menu__item--active">Home</div>
  <div class="menu__item">About</div>
</div>
css
.menu__item--active {
  color: #ff0000;
  font-weight: bold;
}

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

Dễ hiểu và rõ ràng

Một trong những lợi ích lớn nhất của BEM là giúp mã CSS trở nên dễ hiểu. Khi nhìn vào một class tên như menu__item--active, bạn biết ngay rằng:

  • Đây là một item (phần tử) thuộc về menu (Block).
  • Nó đang ở trạng thái active (Modifier).

Điều này giúp bạn dễ dàng biết được vị trí của phần tử đó trong cấu trúc HTML và CSS, ngay cả khi không nhìn vào mã HTML.

Tránh xung đột class

Với BEM, bạn không cần lo lắng về việc trùng lặp tên class giữa các phần khác nhau trong trang web. Mỗi class đều được gắn liền với một Block cụ thể, giúp CSS trở nên an toàn và dễ bảo trì hơn.

Tái sử dụng

BEM giúp tái sử dụng các thành phần một cách hiệu quả. Bạn có thể dễ dàng tạo ra các Block, Element và Modifier khác nhau cho các thành phần khác nhau của trang mà không phải viết lại mã CSS từ đầu.

Dễ bảo trì

Khi dự án lớn lên, CSS thường trở thành một phần phức tạp và khó duy trì. Nhưng với BEM, cấu trúc rõ ràng giúp dễ dàng tìm thấy các class liên quan và thực hiện thay đổi mà không lo làm hỏng các phần khác của trang web.

4. Ví dụ thực tế sử dụng BEM

Hãy cùng tạo một ví dụ đơn giản với một trang web chứa danh sách sản phẩm và sử dụng BEM để tổ chức CSS.

HTML:

html
<div class="product-list">
  <div class="product-list__item product-list__item--featured">
    <h2 class="product-list__title">Product 1</h2>
    <p class="product-list__description">This is a great product.</p>
  </div>
  <div class="product-list__item">
    <h2 class="product-list__title">Product 2</h2>
    <p class="product-list__description">This is another great product.</p>
  </div>
</div>

CSS:

css
.product-list {
  margin: 20px;
}

.product-list__item {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.product-list__item--featured {
  background-color: #f0f0f0;
}

.product-list__title {
  font-size: 1.5em;
  margin-bottom: 5px;
}

.product-list__description {
  font-size: 1em;
  color: #666;
}

Trong ví dụ này, chúng ta có một product-list (Block) chứa các item (Element) và một trạng thái đặc biệt là featured (Modifier). Điều này giúp tổ chức rõ ràng mã CSS và dễ dàng mở rộng nếu cần thêm các phần tử hoặc trạng thái mới trong tương lai.

5. Khi nào không nên sử dụng BEM?

Mặc dù BEM rất hiệu quả trong các dự án lớn hoặc có nhiều thành phần phức tạp, nhưng nếu bạn đang làm việc trên một dự án nhỏ hoặc chỉ cần quản lý một vài class CSS đơn giản, việc sử dụng BEM có thể làm cho mã CSS trở nên cồng kềnh và khó đọc hơn.

Tuy nhiên, với các dự án lớn, việc sử dụng BEM sẽ mang lại lợi ích to lớn trong việc quản lý và duy trì CSS về lâu dài.

Kết luận

Kỹ thuật BEM giúp bạn tổ chức CSS một cách rõ ràng, tránh xung đột class và dễ dàng tái sử dụng. Nếu bạn đang gặp khó khăn với CSS lộn xộn hoặc khó quản lý, BEM là một lựa chọn tuyệt vời để tối ưu hóa và làm cho mã của bạn dễ duy trì hơn.

Hãy thử áp dụng BEM trong dự án tiếp theo của bạn và cảm nhận sự khác biệt!

Bài viết này giúp bạn giới thiệu về một trong những kỹ thuật phổ biến nhất trong CSS hiện nay, đồng thời giúp độc giả hiểu rõ hơn về cách áp dụng BEM vào dự án của họ.