Front-end xoay quanh

BEM style convention

BEM style convention

Hà Nội, ngày mưa, mưa rất to, to lắm lắm…. có lẽ thời tiết gần đây quá nóng, nóng đến điên người. Nhưng nắng mưa là việc của trời, dù có như thế nào mình vẫn sẽ cố gắng ra bài đều đều nhé ^^.

1. Mở đầu

Khi làm việc với Style FE các bạn sẽ nhiều khi không biết đặt tên class như thế nào cho hợp lí, đặt tên kiểu gì cũng bị đồng đội chê ^^. Đến khi nó đặt tên mình cũng thấy như SHIT (M đặt tên cũng ra cái CC gì đâu, chỉ giỏi nói phét 😀 ). Những lúc như vậy cần Tech Leader hay PM(Project manager) ra phân xử, haiiiiizzzzz. Thật là mất time, thế tại sao lại không dùng một quy tắc chung, cứ thế mà làm, đỡ mất time dự án và như vậy Convention style ra đời.

Trong thế giới Convention style của Front-end có rất nhiều nhân vật như OOCSS, SMACSS, SUITCSS, Atomic. Nhưng có lẽ phổ biến và được nhiều dự án dùng nhất là BEM viết tắt của 3 từ: BLOCK, ELEMENT, MODIFIER.

Trong bài viết này chúng ta sẽ cùng phân tích BEM và cụ thể là ba từ khóa này nhé các bạn.

2. Chi tiết

Tại sao lại cần dùng BEM?

Khi làm việc với Css nói riêng (cũng có thể là SCSS, SASS, …) style nói chung chắc các bạn sẽ cảm thấy không có gì lắm khi mà viết mới CSS, chỉ hơi khó chút khi mà đặt tên class. Nhưng hãy nghĩ đến lúc dự án to lên, code style nhiều lên thì sao, liệu nó có dễ maintain hay scale up. Chắc là được nhưng hơi khó, cảm thấy mệt mỏi khi mà nhìn vào đống style lằng nhằng trả theo cái quy tắc nào thì đó là lúc ta cần dùng đến BEM.

Hoặc khi dự án có member mới vào, không hiểu team đang viết style theo kiểu nào và bạn này lại viết theo kiểu riêng của mình, thì đó cũng là lúc một chuẩn mà nhiều dự án dùng như BEM phát huy tác dụng. Vì BEM là một convention phổ biến lên khả năng new member biết là rất cao.

BEM sẽ làm cho code style của dự án dễ đọc, có quy tắc, có sự nhất quán riêng góp phần tạo ra sự chuyên nghiệp hơn cho dự án.

Các khái niệm trong BEM.

BEM là một naming convention cho phép bạn viết code style clean, dễ dàng maintain về sau. Nó là một quy tắc phổ biến viết style mà phần các dự án bây giờ dùng nếu còn băn khoản về sự phổ biến của BEM bạn có thể lên IT-Viec nhìn các JOB về Frond-end nhé ^^.

BEM là viết tắt của 3 từ: BLOCK, ELEMENTMODIFIER với quy tắc nối block__element–modifier, theo đó một class luôn bắt đầu với một BLOCK, sau đó là ELEMENT (Được nối với block bằng 2 dấu gạch dưới) và MODIFIER (được nối với element bằng 2 dấu gạch ngang).

Block

Ở đây bạn có thể hiểu Block là một khối độc lập của một nhóm nào đó hay cũng có thể dùng lại như là một component. Với block bạn lên đặt tên chung chung không cần cụ thể quá để cho tên được ngắn gọn và có khả năng dùng lại là cao nhất ví dụ là: card, post, …

Element

Element chỉ tồn tại bên trong Block, ở đây các bạn có thể hiểu nó là các phần nhỏ hơn của block như : ‘card__title’, ‘card__text’ or ‘card__button’ ….. hay một phần nào đó nhỏ hơn.

Modifier

Modifier là các trạng thái, biến thể khác nhau của một block hay element, ở đây tên class có thể giống như là: ‘card—featured’ of ‘card__button—primary’.

Example

Từ các điều mình đã trình bày ở bên trên thì sẽ ra được ví dụ ntn: ^^

Đó là ví dụ mẫu thôi nhé các bạn, trên thực tế nó còn nhiều biến thể, mình sẽ nói thêm ở phần sau nhé. Như bên trên chúng ta sẽ có phần style như sau.

.post {}
.post__image {}
.post__name-tag--hightlight {}
.post__name-tag--normal {}
.post__name {}
.post__intro {}

Và nếu như các bạn áp dụng Css preprocessor vào thì sẽ thấy được sự magic của nó, còn Css preprocessor là gì thì mong các bạn theo dõi blogs tiếp nhé, mình sẽ viết ở tương lai gần thôi. Như bên dưới là code được viết ở định dạng sass nhé ^^.

.post {
    &__image {}
    &__name-tag {
        &--hightlight {}
        &--normal {}
    }
    &__intro {}
}

Dùng BEM với các loại Style front-end

Như bên trên mình có lấy ví dụ dùng BEM với SASS, các bạn cũng có thể dùng BEM với styl, less, scss, … nhé. BEM đặc biệt hiệu quả khi các bạn dùng nó với Css preprocessor nhé ^^.

Biến thể

BEM dù là quy chuẩn nhưng nó cũng có biến thể giống như làm thơ vậy, nhiều khi tác giả muốn viết khác đi chút để người đọc cảm thấy mới lạ hơn (LOLLLLL). Đó là THƠ còn đối với một quy tắc lập trình thì biến thể là để giải quyết một số hạn chế mà quy tắc đó mang lại, cụ thể ở đây là nếu: Các bạn viết nhiều block lồng nhau thế thì class nó sẽ dài lắm, lại gây cảm giác thừa, hay khi tên class quá dài muốn cắt ngắn nó đi nhưng vẫn đảm bảo quy tắc BEM ???….

Đối với những trường hợp các bạn cảm thấy tên quá dài như vậy hoặc nhiều block bao lên nhau thì hãy chú ý chỉ cần viết __element–modifier hoặc –modifier thôi. ^^ nhưng chỉ khi mà các bạn dùng Css preprocessor, bản thân mình thấy không lên bỏ với CSS thường (Mà thật ra bây giờ có mấy cái dùng css thường, có lẽ trừ mấy cái dự án maintain, member quá sợ thay đổi, sợ cái mới ^^ – Muốn êm đềm qua ngày @@).

Dưới đây là một ví dụ nhỏ mình bỏ bớt tên class nhé, các bạn có thể tham khảo.

<button class="btn__submit btn__submit--small btn__submit--green btn__submit--active">
    Submit
</button>

Sau khi xử lý:

<button class="btn__submit --small --green --active">
    Submit
</button>

Bên trên chỉ là một ví dụ rất nhỏ thôi nhé, nhưng có lẽ nó có một phần mình muốn nói với các bạn.

3. Kết luận

BEM là một quy tắt mà khi đi làm FE có lẽ các bạn sẽ gặp rất nhiều, nó cũng là câu hỏi thường gặp khi mà các bạn đi phỏng vấn. Mình thấy các công ty hỏi rất nhiều, nếu còn năn tăn bạn có thể lên IT-Viec tìm job Front-end nhé.

Cuối cùng, quy tắc này là khá dễ áp dụng, mang lại hiệu quả rất nhiều cho dự án. Nhưng để master có lẽ cần thời gian rất nhiều vì các bạn cần gặp nhiều trường hợp khó để có thể áp dụng biến thể. Thêm nữa BEM chỉ là quy tắc hỗ trợ đặt tên thôi, nhưng mình dám cá là các bạn sẽ viết html, css rất nhanh vì không cần nghĩ nhiều ^^.

GOODBYE, SEE YOU SOON!!!!!!

4. Tham khảo

# BEM
# BEM 101
# MindBEMding – getting your head ’round BEM syntax
# What BEM is

Tagged , , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
FistName
FistName
4 months ago

Chúc bạn sớm thành công!