Quy tắc BEM trong CSS – Bạn không cần phải đau đầu với cách đặt tên class nữa

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

• product là một block, style của nó được định nghĩa thông qua class .product
• .product__title, .product__image, .product__description lần lượt là các class element.
• .product--style-1, .product--big, .product--small, .product__title--style-1 là các class “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

Block__Element--Modifier

Với cách đặt tên kiểu này, các css selector sẽ khó mà trùng nhau được

Tham khảo việc làm CSS hấp dẫn trên TopDev

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

Lợi ích mà ai cũng thấy được ngay đó là BEM 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 “phẳng” các class, không có sự lồng cấp kiểu .a .b .c, giúp bạn không cần phải để ý tới độ ưu tiên (specificity) khi code css.
• Giảm công sức của developer trong việc phải cố nghĩ ra một cái tên vừa hay vừa chưa tồn tại.

Ngoài các lợi ích kể trên, BEM còn phù hợp để triển khai với SCSS

Ví dụ: Vẫn là đoạn CSS ở ví dụ trên, nhưng giờ mình viết theo SCSS.

.product {
    &__title {
        &--style-1 { }
    }

    &__description { }
    &__image { }

    &--style-1 { }
    &--big { }
    &--small { }
}

III. 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 điều này, nếu không cận thận bạn sẽ có .Mot-cai-class__dai--ngoang-ngoang-the-nay.

Nhưng dài mà mang đủ ý nghĩa, đảm bảo không bị trùng thì cũng không sao. Còn xấu thì… nhìn nhiều khắc quen.

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

Quay trở lại với ví dụ ở phần đầu, 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ư sau:

.product { }

.product .title { }
.product .description { }
.product .image { }

.product.style-1 { }
.product.big { }
.product.small { }
.product .title.style-1 { }

Nhìn còn có vẻ gọn ngàng hơn đấy chứ, nhưng khi dự án phát triển tới một “cảnh giới” nhất định thì liệu bạn có chắc chắn các class sẽ không bị đặt tên chồng chéo không? Giả sử ở đâu đó trong project đã có ai đó định nghĩa các class .title, .image, .description rồi thì sao?

// Ai đó đã định nghĩa trước các selector thế này
.title { }
.description { }
.image { }

Không biết bạn có cảm thấy không hài lòng với BEM ở chỗ nào không?

IV. 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 nhưng quan trọng vẫn là giúp developer bớt phải nghĩ ra cái tên vừa hay vừa chưa được sử dụng.
• 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 class dài và xấu, hoặc họ tự có phương pháp khác thay thế BEM.

Còn bạn 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 comment cho mình biết với.

Bài viết gốc được đăng tải tại phambinh.net

Xem thêm:

• Tìm hiểu Conditional Border Radius trong CSS
• Học CSS Flexbox toàn tập phần 1
• Những projects giúp nâng hạng Front-end Developer

Xem thêm công việc CNTT hấp dẫn trên TopDev