BEM là gì ? Tìm hiểu về cách đặt tên trong CSS

Long time no see. Lâu lâu rãnh rỗi tranh thủ vọc vạch ngồi viết bài mới cho các bạn, đặc biệt là các độc giả hay theo dõi blog mình cũng như các bạn newbie mới vào. Mấy nay lướt nhóm Facebook thấy nhiều bạn bị vướng chỗ cách đặt tên trong CSS. Nên cố gắng tìm hiểu để viết một bài về nó cho các bạn tham khảo.

Chắc hẳn là khi các bạn tham gia một dự án web, hay là đọc mã nguồn của một trang web. Các bạn có lẽ sẽ thấy các classes của website hay trong dự án được đặt tên theo một chuẩn nào đó chẳng hạn như là .header__top, .header-bottom hay .header--secondary….

Các bạn sẽ tự hỏi rằng tại sao họ lại làm như vậy? Tại sao đặt tên trong CSS mà lại dài dòng như thế sao không code dạng như nav ul li cho nó lẹ…. Qua tìm hiểu thì các bạn biết được rằng việc đặt tên như vậy gọi là BEM. Vậy BEM là gì ? Chúng ta hãy cùng nhau tìm hiểu nhé.

# Khái niệm

BEM là một quy ước đặt tên, giúp cho việc code Frontend dễ đọc và dễ hiểu hơn, dễ làm việc và dễ mở rộng cũng như bảo trì. Việc đặt tên chuẩn giúp các bạn hiểu được đoạn code đó có ý nghĩa gì, nó thực hiện nhiệm vụ gì. Từ đó những người khác khi đọc vào code của bạn họ cũng hiểu được bạn đang làm gì, từ đó dễ dàng phân tích, thay đổi và quản lý hơn sau này.

.nav ul li {} // ảnh hưởng đến nhiều thành phần li khác trong nav
.nav{} // style cho thẻ nav có class .nav
.nav__list{} // style cho thẻ ul có class .nav__list
.nav__item{} // style cho thẻ li có class .nav__item

Các bạn vẫn chưa hiểu? Sau đây là một ví dụ đơn giản để các bạn dễ hình dung hơn nhé.

# Giải thích

Đây là một Stick Man, chúng ta hãy coi nó là một Block, Block là đại diện cho chữ cái đầu tiên trong BEM nhé. Như tên gọi của nó ta có thể đặt class cho nó là .stick-man

Tiếp theo là chữ E trong BEM nghĩa là Elements tức là những thành phần có trong Stick Man này, như là cái đầu(head), tay(arm), chân(feet), cơ thể(body)… Lúc này chúng ta sẽ có các class như là .stick-man__head, .stick-man__arm, .stick-man__feet…. Lúc này các bạn có thể thấy là Element theo sau 2 dấu gạch dưới __ của Block. Cấu trúc tạm thời lúc này ta có .Block__Element

Cuối cùng là chữ M nghĩa là Modified nghĩa là các biến thể của Block hoặc Element của Block cụ thể ở đây là .stick-man, hay .stick-man__head ví dụ Stick Man hiện tại là màu hồng, chúng ta muốn nó là màu xanh hay là màu đỏ thì theo sau Block là 2 dấu gạch ngang — ví dụ .stick-man--blue, .stick-man--red . Ta có cấu trúc .Block–Modified

Tuy nhiên mình lại muốn thay đổi cái đầu(head) to ra thôi thì lúc này Modified phải theo sau Element là head thay vì Block như sau .stick-man__head--big hay tay dài ra ta có .stick-man__arm--long , .stick-man__head--small cho đầu nhỏ lại. Ta có cấu trúc .Block__Element–Modified

# Tại sao lại sử dụng BEM ?

Như mình đã nói ở trên, việc đặt tên rất quan trọng và cũng rất khó. Không phải đặt tên loạn xạ là được đâu, khó cho sau này các bạn bảo trì hay người khác đọc code của bạn. Việc đặt tên cũng tốn thời gian lắm, phải suy nghĩ tên sao hợp lý, người khác đọc vào hiểu mà không phải suy nghĩ lâu quá.

Đa số đặt tên là theo tiếng Anh cho nên mình nghĩ các bạn cũng nên có vốn từ vựng về tiếng Anh nhé để đặt cho chuẩn chớ đừng đặt tên theo Tiếng Việt như là .menu-phia-tren hay .footer-o-duoi nhé ^^!

# Ví dụ đơn giản

Ví dụ đơn giản mình sẽ demo hai buttons đơn giản với cấu trúc HTML như sau:

<button class="btn btn--primary">primary</button>
<button class="btn btn--secondary">primary</button>

Nhìn vào các bạn dễ hiểu là class .btn là block còn .btn--primary là modifed với class .btn thì chúng ta sẽ style giống nhau khi sử dụng class này, còn với modified --primary hay --secondary chúng ta sẽ có style khác nhau để phân biệt như sau:

.btn{
 display: inline-block;
 border: 0;
 outline: none;
 color: white;
 text-align: center;
 padding: 10px 20px;
 cursor: pointer;
}
.btn--primary{
 background-color: blue;
}
.btn--secondary{
 background-color: red;
}

# Tạm kết

Như vậy mình đã giải thích xong về BEM một cách đơn giản dễ hiểu cho các bạn. Hi vọng các bạn sẽ hiểu được phần nào cho việc đặt tên trong css cho các class, cũng như độ quan trọng của nó trong việc code website. Mình hi vọng với kiến thức ít ỏi của mình sẽ giúp cho các bạn phần nào trong việc trở thành một Frontend Dev thực thụ trong tương lai. Cuối cùng chúc các bạn một ngày tốt lành.

Bài viết có tham khảo từ Medium

.