Việt Nam

Quy tắc BEM trong CSS

Đăng bởi:

Trần Quốc Cường

Đăng ngày:

Jan 29, 2021

Đăng ở:

Tin Tức Công Nghệ

Chào các bạn,

Đã có bao giờ, trong lúc làm Front-end cho các dự án, mà bạn phải đau đầu để suy nghĩ về các class của HTML như thế nào cho đúng và hợp lý? Mình thì thường xuyên đấy. Nhất là khi các dự án được thực hiện bởi nhiều người, thì việc đặt trùng tên class ở một số block có giao diện giống nhau là việc thường xuyên xảy ra. Và qua nhiều lần như thế, cùng với việc phải tối ưu thời gian để thực hiện thì mình đã lục lọi trên goolge với mục đích tìm ra một cách nào đó để giải quyết việc này.

Cuối cùng thì mình tìm được một quy tắc khá hay đó là quy tắc BEM, và muốn chia sẻ đến mọi người. Hãy cũng mình tìm hiểu nó là gì nhé! Let's Go !!!

1. Quy tắc BEM là gì?

BEM là gì? BEM là từ viết tắt của Block Element Modifiers, hiểu đơn giản theo dịch nghĩa là "Khối - Phần tử - Biến thể", dịch ra thì có vẻ không được sát nghĩa cho lắm, nên mình cứ để Tiếng Anh cho hợp lí.

Với quy tắc BEM, nó sẽ chia các class css ra làm 3 loại:

Class định nghĩa cho một block
Class định nghĩa cho các element trong block
Class định nghĩa các "biến thể" cho bock hoặc cho element trong block

CSS được viết theo quy tắc BEM

HTML được viết theo quy tắc BEM

Từ hai đoạn code trên bạn có thể thấy:

section là một block, style của nó được định nghĩa thông qua class .section
section-content là các element
section-content__title, section-content__desc lần lượt là các "biến thể"

Tổng quát lại, chúng ta có thể thấy một class viết theo quy tắc BEM sẽ có cấu trúc như sau:

2. Lợi ích khi sử dụng BEM

Khi sử dụng quy tắc BEM, lợi ích mà ai cũng thấy được ngay đó là giúp chúng ta giảm khả năng 2 css selector bị trùng nhau - giống như ngay từ đầu mình đề cập. Nhưng ngoài ra, BEM còn có một số lợi ích khác

Giúp bạn hình dung ra được cấu trúc của một block HTMl sẽ sử dụng các class này
Dễ dàng nắm bắt được các thành phần phụ thuộc lẫn nhau
với BEM, nó làm các class tương đương nhau, không bị lồng cấp, giúp bạn không cần để ý tới độ ưu tiên trong khi code css
Giảm công sức của developer trong việc nghĩa ra tên class vừa hợp lí vừa chưa tồn tại trong project

Ngoài ra, BEM còn phù hợp để triển khai với SCSS, nó sẽ được viết theo dạng như thế này

3. Một số ý kiến không đồng tình với quy tắc BEM

Dù có nhiều lợi ích, nhưng có nhiều người không thích dùng quy tắc này vì

Nó dài và xấu

Mình công nhận, nếu không cẩn thận thì bạn sẽ có mot-cai-class__dai-nhu-the-nay

Có thể một số người nhìn quen sẽ thấy nó mang đủ ý nghĩa, đảm bảo không bị trùng class

Nó có vẻ không cần thiết

Quay trở lại với vị dụ ở phần đầu, thì mình có thể viết css không tuân theo quy tắc BEM và vẫn đáp ứng được một số lợi ích của BEM

Nhìn có vẻ gọn gàng hơn đẩy chứ, nhưng khi xây dựng và phát triển một dự án lớn, thì liệu bạn có đảm bảo chắc chắn là các class không bịt trừng ở đâu đó, hoặc là đã được một người trong nhóm đặt cho vị trí khác.

4. Tổng kết

Tổng kết lại thì:

BEM là quy tắc đặt tên class cho CSS, mang lại nhiều lợi ích cho developer trong quá trình làm việc
BEM sẽ tuyệt vời hơn khi sử dụng với SCSS
Có nhiều người không thích BEM vì nó làm tên dài và xấu, hoặc họ tự có phương pháp khác thay thế BEM

Còn bạn thấy thế nào, bạn có thấy BEM cần thiết trong dự án của mình không? Hãy để lại ý kiến cho mình biết nhé

Tác giả: Trần Quốc Cường

ADMIN

Quy tắc BEM trong CSS

1. Quy tắc BEM là gì?

Những kĩ năng cần thiết để trở thành một Web Developer