Xin chào các bạn, bài viết lần này của chúng ta sẽ về mảng Front End cụ thể là về CSS. Hôm nay, mình xin giới thiệu với các bạn một phương pháp đặt tên cho class trong HTML và CSS với tên gọi là BEM.
Nội dung chính của bài viết như sau:

BEM là gì ?
Vì sao phải sử dụng BEM?
Ví dụ

1. BEM là gì?

Phương pháp BEM là viết tắt của Block, Element và Modifier là một naming convention cho class trong HTML và CSS. Phương pháp BEM được tạo ra bởi team Yandex với mục tiêu giúp Front end dev hiểu rõ hơn về mối quan hệ giữa HTML và CSS trong một project.

Cụ thể hơn, một class được đặt tên theo phương pháp BEM sẽ bao gồm 3 thành phần

Block: định nghĩa cho phần tử cha ngoài cùng của component
Element: trong mỗi component, có thể có một hay nhiều phần tử con, các phần tử con này được định nghĩa bởi element
Modifier: Cả Block và Element đều có thể có sự thay đổi trạng thái, sự thay đổi này được mô tả qua Modifier.

Khi đó, với một class name có đầy đủ 3 thành phần B, E, M sẽ có dạng như sau:

[block]__[element]--[modifier]

Ví dụ sau sẽ minh hoạ cụ thể cho BEM

/* This is a button as block*/

.btn {}

/* These are 2 elements in block: button icon and button label */

.btn__icon {}

.btn__label {}

/* Button have 2 status describe as modifier: active and disabled*/

.btn--active {}

.btn--disabled {}

HTML

<button class="btn btn--active">
 <i class="search .btn__icon" />
 <span class="btn__label">Search</span>
<button>

2. Vì sao nên sử dụng BEM?

Sau khi đã hiểu BEM là gì, thì chúng ta sẽ tìm hiểu xem vì sao nên sử dụng BEM

Tránh trùng lặp code CSS: Khi tạo một component mới, chúng ta có thể tìm thấy được các trạng thái của component này đã được định nghĩa trước thông qua các modifier, từ đó tránh được việc phải viết lại CSS cho component đó,
BEM giúp thể hiện cấu trúc của component cũng như môi quan hệ giữa các thành phần: Khi đọc code HTML của button ở trên ta có thể thấy được .btn__icon và .btn__label phụ thuộc vào .btn mà không cần biết vai trò cụ thể của icon và label là gì
BEM giúp hạn chế việc lồng cấp trong CSS: Bằng cách sử dụng BEM, các class chỉ được 1 cấp và không lồng nhau, điều này làm cho việc “tính điểm” hay “specificity” của project thấp hơn, giúp dễ dàng xử lí với các thuộc tính có sẵn hay tranh được các bad practice trong CSS như !important hay inline CSS

3. Ví dụ

Để hiểu rõ hơn về BEM, chúng ta sẽ cũng làm thử một ví dụ thực tế nhau sau.

Như ta thấy, chúng ta có 1 header của một trang web, gồm logo, thanh tìm kiếm và một hamburger button để hiển thị menu.
Chúng ta sẽ có cấu trúc HTML cho header như sau:

<div class="header">
 <img class="header__logo" />
 <input class="header__search">
 <button class="header__menu"></button>
<div>

Nhờ có BEM, ta thấy được cấu trúc của header bao gồm

Block: header
Element:
- Logo: header__logo
- Search bar: header__search
- Menu: header__menu

Khi đó để style cho component header ta sẽ làm như sau

.header {
 // rules
}
.header__logo {
 // rules
}
.header__search {
 // rules
}
.header__menu {
 // rules
}

Tiếp theo, như ta thấy, khi chưa có nội dung trong thanh search thì input sẽ ngắn và có background màu xám, khi có nội dung thì thanh search sẽ dài ra và không có background.
Khi đó ta có thể cấu trúc khi chưa gõ nội dung search như sau:

<div class="header">
 <img class="header__logo" />
 <input class="header__search header__search--empty">
 <button class="header__menu"></button>
<div>

và khi có nội dung search sẽ là

<div class="header">
 <img class="header__logo" />
 <input class="header__search header__search--typing">
 <button class="header__menu"></button>
<div>

Trong CSS ta định nghĩa các class cho modifier

.header {
 // rules
}
.header__logo {
 // rules
}
.header__search {
 // rules
}
.header__search--empty {
 // rules when search empty
}
.header__search--typing {
 // rules when typing in search input
}
.header__menu {
 // rules
}

Kết luận

BEM đem lại một hướng tiếp cận mới cho việc đặt tên class trong HTML và CSS, giúp bạn có thể viết code sạch và dễ bảo trì hơn. Bên cạnh đó vẫn có một số tranh cãi về việc sử dụng BEM như tên quá dài dòng … Còn ý kiến của bạn thế nào, liệu bạn sẽ sử dụng BEM trong project tiếp theo của mình chứ? Hay để lại ý kiến bình luận ở dưới nhé.
Thanks

Julian Dong

Giới thiệu phương pháp BEM trong CSS

1. BEM là gì?

2. Vì sao nên sử dụng BEM?

3. Ví dụ

Kết luận

Reference