Quy ước đặt tên CSS theo chuẩn BEM

1. GIỚI THIỆU BEM

Trên các trang web nhỏ, cách bạn tổ chức các style của mình thường không phải mối quan tâm lớn. Tuy nhiên, đối với các dự án lớn hơn, phức tạp hơn, cách bạn tổ chức code của mình là chìa khóa để đạt được hiệu quả cao hơn, nó sẽ ảnh hưởng đến việc bạn mất bao lâu để viết code, bạn sẽ phải viết bao nhiêu code và trình duyệt của bạn sẽ phải tải bao nhiêu. Điều này trở nên đặc biệt quan trọng khi bạn làm việc với nhóm các lập trình viên chuyên nghiệp và khi hiệu suất cao là điều cần thiết.

Có nhiều phương pháp nhằm mục đích giảm lượng CSS, giúp bảo trì cơ sở mã CSS lớn tốt hơn và hỗ trợ cho việc hợp tác giữa các lập trình viên hiệu quả hơn, như OOCSS, AMCSS, SMACSS, SUITCSS, BEM, Atomic,…

Tại sao nên chọn BEM?

Cho dù bạn chọn sử dụng phương pháp nào trong các dự án của mình, thì việc dùng CSS và UI có cấu trúc hơn cũng sẽ mang lại lợi ích cho bạn.

“Lý do tôi chọn BEM mà không phải các phương pháp khác là do BEM ít gây nhầm lẫn hơn các phương pháp khác (SMACSS) nhưng vẫn cung cấp cho chúng ta cấu trúc tốt mà chúng ta muốn (OOCSS) với một thuật ngữ dễ nhận biết.” – theo Mark McDonnell trong “Maintainable CSS with BEM”.

BEM là gì?

BEM là tên viết tắt của: Block, Element, Modifier, là một phương pháp giúp bạn tạo ra các components có thể tái sử dụng và chia sẻ code trong phát triển front-end.

Tên class BEM bao gồm 3 thành phần: block, element và modifier (có thể hiểu là: khối, phần tử và sửa đổi). Trong bài này, tên các thành phần của BEM sẽ được giữ nguyên tên theo tiếng Anh cho dễ hình dung.

Nếu cả ba được dùng chung thì tên class BEM sẽ như thế này: block__element--modifier

Định nghĩa block, element, modifier

2. QUY TẮC ĐẶT TÊN

Chỉ có hai vấn đề khó khăn trong Khoa học máy tính: vô hiệu hóa bộ đệm và đặt tên cho mọi thứ.

_Phil Karlton_

Thực tế là, hầu hết các cơ sở mã CSS đôi khi được phát triển mà không có bất kỳ cấu trúc hoặc quy ước đặt tên cụ thể nào. Điều này dẫn đến việc cơ sở mã CSS không thể khắc phục được trong thời gian dài.

BEM đảm bảo rằng tất cả những người tham gia phát triển một trang web đều hoạt động với một cơ sở mã duy nhất và dùng cùng một ngôn ngữ. Sử dụng cách đặt tên phù hợp sẽ giúp bạn có chuẩn bị tốt hơn cho những thay đổi trong thiết kế của trang web sau này.

Quy tắc, cách sử dụng BEM đối với block, element, modifier

BLOCK

Quy tắc đặt tên

• Tên block có thể bao gồm các chữ cái Latinh, chữ số và dấu gạch ngang.
• Tạo CSS class: thêm một tiền tố vào phía trước. VD: .block

HTML

• Bất kỳ node (nút) DOM nào cũng có thể là một block nếu nó có một class name.
• VD: 

<div class="block">...</div>

Cách dùng trong CSS

• Chỉ sử dụng bộ chọn class
• Không dùng tên tag (thẻ) hoặc id
• Không phụ thuộc vào các block/element khác trên một trang
• VD:

.block { color: #042; }

ELEMENT

Quy tắc đặt tên

• Tên element có thể bao gồm các chữ cái Latinh, chữ số, dấu gạch ngang và dấu gạch dưới. 
• Tạo class CSS: tên block cộng với hai dấu gạch dưới, cộng với tên element.
• VD: .block__elem

HTML

• Bất kỳ node DOM nào trong một block đều có thể là một element.
• Trong một block nhất định, tất cả các element đều bằng nhau về mặt ngữ nghĩa.
• VD: 

<div class="block">
            ...
  <span class="block__elem"> </span>
</div>

Cách dùng trong CSS

• Chỉ sử dụng bộ chọn class
• Không dùng tên tag (thẻ) hoặc id
• Không phụ thuộc vào các block/element khác trên một trang
• VD: 

- Nên: 

.block__elem { color: #042; }

- Không nên: 

.block .block__elem { color: #042; }

div.block__elem { color: #042; }

MODIFIER

Quy tắc đặt tên

• Tên của modifier có thể bao gồm các chữ cái Latinh, chữ số, dấu gạch ngang và dấu gạch dưới. 
• Tạo class CSS: tên block hoặc element cộng với hai dấu gạch ngang, cộng với tên modifier.
• Dấu cách trong các modifier dài (chứa 2 tiếng trở lên) được thay thế bằng dấu gạch ngang.
• VD: 

.block--mod { }
.block__elem--mod { }
.block--color-black { }
.block--color-red { }

HTML

• Modifier là tên class mà bạn thêm vào node DOM block/element. 
• Tăng thêm các modifier class vào các block/element mà chúng ta cần sửa đổi và giữ lại class ban đầu của block/element đó.
• VD:

- Nên (thêm các class mới có chứa modifier, và giữ nguyên class cũ .block):

<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">...</div>

- Không nên (thay thế class cũ):

<div class="block--mod">...</div>

Cách dùng trong CSS

• Sử dụng modifier class làm bộ chọn CSS. VD:

.block--hidden { }

• Thay đổi các element dựa trên block có chứa modifier. VD: 

.block--mod .block__elem { }

• Element có modifier. VD:

.block__elem--mod { }

3. CÁC VÍ DỤ

VD1: Giả sử bạn có một block là form với modifier (phần bạn muốn sửa đổi) là theme: "xmas" và simple: true.

Trong block form chứa các element là input và submit. Trong đó, element submit có modifier của riêng nó là disabled: true (mục đích là không cho phép gửi form đi khi chưa được điền), thì HTML và class CSS khi đó được viết như sau:

HTML

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

CSS

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

VD2: Hãy xem cách một phần tử cụ thể trên trang được triển khai trong BEM như thế nào. Chúng ta sẽ lấy ví dụ từ button (nút) trên GitHub:

Chúng ta có thể có một button bình thường (Normal button) cho các trường hợp thông thường và hai trạng thái khác cho các trường hợp khác nhau (Success button, Danger button). Chúng ta có thể tạo ra các button bằng cách sử dụng bất kỳ tag (thẻ) nào chúng ta muốn (button, a hoặc thậm chí là div), sau đó chúng ta style cho block bằng bộ chọn class với BEM. 

Theo quy tắc đặt tên của BEM, chúng ta sử dụng cú pháp block--modifier-value.

HTML

<button class="button">Normal button</button>
<button class="button button--state-success">Success button</button>
<button class="button button--state-danger">Danger button</button>

CSS

.button {
	display: inline-block;
	border-radius: 3px;
	padding: 7px 12px;
	border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}

.button--state-success {
	color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
	border-color: #4A993E;
}

.button--state-danger {
	color: #900;
}

LƯU Ý QUAN TRỌNG KHI SỬ DỤNG BEM

BEM không có mục đích phản ánh cấu trúc lồng nhau của các block, các element.
Giả sử: Một block chứa element 1, element 1 chứa element 2, element 2 chứa element 3. Khi đó, tên class của block và element nên đặt như sau:

HTML

<div class="block">
  <div class="block__elem1">
    <div class="block__elem2">
      <div class="block__elem3"></div>
    </div>
  </div>
</div>

CSS

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

Đặt class như vậy, sẽ làm cho các element chỉ phụ thuộc vào block. Sau này, nếu bạn muốn thay đổi giao diện, bạn có thể dễ dàng di chuyển vị trí của các element trong block, cấu trúc của block DOM lúc này tuy đã thay đổi nhưng bạn không phải lo sửa code CSS ban đầu.

4. LỢI ÍCH KHI SỬ DỤNG BEM

Tham khảo: getbem.com