Để hiểu về Quy ước B.E.M, trước hết hãy nói về quy ước đặt tên. Quy ước đặt tên (Naming convention) giúp mọi thứ dễ dàng hơn bằng cách đảm bảo tính nhất quán trong code bạn. Đó là một khuôn mẫu đã được nghiên cứu và hệ thống hóa để đặt tên cho class.
Quy ước đặt tên đặc biệt hiệu quả khi bạn đang làm việc theo nhóm. Khi viết code chung với những người khác, bạn sẽ thấy sự cần thiết phải có tiếng nói chung, những quy ước chung nhằm đảm bảo các đoạn code có thể ghép vào với nhau hoàn hảo. Trong bài đăng này, chúng ta hãy cùng tìm hiểu những quy ước đặt tên theo style Front-end.
Có rất nhiều naming convention của Front-end được yêu thích và sử dụng rộng rãi như: OOCSS, SMACSS, SUITCSS, Atomic. Tuy nhiên, phổ biến và được nhiều dự án dùng nhất có lẽ là quy ước theo hình thức B.E.M. Hãy cùng tìm hiểu nội dung của quy ước BEM trong bài viết này.
Tóm Tắt
Quy ước đặt tên B.E.M
Quy ước B.E.M là gì?
B.E.M là viết tắt của 3 từ Block – Element – Modifier, là một quy ước đặt tên tiêu chuẩn cho các class của CSS. Nó được áp dụng khá rộng rãi và vô cùng hữu ích trong việc viết CSS dễ đọc, dễ hiểu và dễ mở rộng quy mô cũng như maintain lâu dài.
Chính vì những ưu điểm của mình, BEM trở thành một quy ước phổ biến để viết style mà phần lớn các dự án hiện tại đang sử dụng.
Tại sao lại cần dùng Quy ước B.E.M?
Khi làm việc với CSS, hay SCSS, SASS style,… việc viết mới khá đơn giản, và có lẽ công việc tốn thời gian nhất là đặt tên class. Vấn đề sẽ chỉ hiện rõ khi dự án đã chạy một thời gian, code style trở nên nhiều hơn. Nếu bạn cảm thấy mệt mỏi khi mà nhìn vào hệ thống style lằng nhằng, không theo quy ướ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, có một kiểu viết code riêng không giống với team dự án đan chạy. Đó cũng là lúc cấn giới thiệu cho mem mới đó chuẩn chung mà dự án sử dụng, ví dụ như B.E.M. Vì BEM là một convention phổ biến, khả năng cao các thành viên mới cũng hiểu và dễ dàng bắt kịp với tiến độ dự án.
BEM sẽ làm cho code style của dự án dễ đọc, có quy ước, có sự nhất quán riêng góp phần tạo ra sự chuyên nghiệp cho sản phẩm.
Các khái niệm trong B.E.M
Như đã nêu ở trước BEM là viết tắt của 3 từ: BLOCK , ELEMENT và MODIFIER, có quy ước nối như sau:
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
Có thể hiểu Block là một khối độc lập của một nhóm, hay cũng có thể dùng lại như một component. Tên của block trả lời cho câu hỏi “Đây là gì?”.
Nó cần ngắn gọn, dễ hiểu, bao quát, không cụ thể để có khả năng dùng lại cao nhất. Ví dụ như: card, post,…
Element
Element là một yếu tố bên trong block, và chỉ tồn tại bên trong Block. Tên của Element cũng cần trả lời cho câu hỏi “Đây là gì?”.
Các bạn có thể hiểu nó là các phần nhỏ, chi tiết hơn của block như: ‘card__title’, ‘card__text’ hoặc là ‘card__button’ ……
Modifier
Modifier quy định các trạng thái, biến thể hay hình dạng khác nhau của một block hay element. Tên của Modifier lần làm rõ một số câu hỏi như: To bao nhiêu? Theme nào? Nó khác gì các modifier khác? Nó phản ứng như thế nào?…
Một số ví dụ về tên class có modifier: ‘card—featured’ of ‘card__button—primary’
Ví dụ về cách đặt tên theo quy ước B.E.M
Dưới đây là một ví dụ về cách đặt tên các component theo quy ước B.E.M
Trên thực tế, sẽ có phát sinh thêm nhiều biến thể khác nhau mà chúng ta sẽ đề cập ở bên dưới. Quay trở lại với ví dụ, chúng ta sẽ có phần style như sau:
style.css
.post {}
.post__image {}
.post__name-tag--hightlight {}
.post__name-tag--normal {}
.post__name {}
.post__intro {}
Style cũng có thể được viết với định dạng SASS như sau
style.scss
.post {
&__image {}
&__name-tag {
&--hightlight {}
&--normal {}
}
&__intro {}
}
Dùng
BEM với các loại Style front-end
Bên trên là ví dụ khi sử dụng BEM kết hợp với SASS, chúng ta cũng có thể dùng BEM với styl, less, scss,…. BEM đặc biệt hiệu quả khi được sử dụng cùng Css preprocessor.
Biến thể của Quy ước B.E.M
BEM dù là quy chuẩn nhưng nó cũng có những biến thể khác nhau không tuân theo quy chuẩn. Đối với một quy ước lập trình, biến thể là để giải quyết một số hạn chế mà quy ước đó mang lại.
Lấy ví dụ với trường hợp sau đâu: hệ thống đang phát triển yêu cầu các bạn phải viết nhiều block lồng nhau. Nếu áp dụng theo quy ước B.E.M thì tên class sẽ rất dài, tạo cảm giác thừa thãi. Hoặc khi tên class quá dài, bạn muốn cắt ngắn nó đi nhưng vẫn đảm bảo quy ước BEM thì phải làm thế nào?
Trong những trường hợp này, chúng ta có thể bỏ phần block, chỉ cần viết element–modifier để tiết kiệm thời gian. Tuy nhiên đối với CSS thường thì chúng ta không nên bỏ phần block đi, trừ khi đang sử dụng Css Processor.
Dưới đây là một ví dụ khi bỏ bớt tên class:
<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>
Kết luận
Quy ước B.E.M là một yếu tố mà khi làm Front-End có lẽ chúng ta sẽ gặp rất nhiều. Đây là một quy ước khá dễ áp dụng, mang lại hiệu quả cao cho dự án. Nhưng để thành thạo nó, chúng ta sẽ cần nhiều thời gian, cũng như nhiều trải nghiệm thực tế để có thể áp dụng biến thể của B.E.M trong các trường hợp đặc biệt.
Dù B.E.M chỉ là một quy ước nhỏ về việc hỗ trợ đặt tên, nhưng khi thành thạo nó, bạn có thể cải thiện được tốc độ viết html, css của mình lên rất nhiều!
Nguyễn Xuân Sơn – CO-WELL Asia
Xem thêm các bài viết khác của CO-WELL Asia tại đây
