BEM là kỹ thuật không thể thiếu nếu muốn trở thành một lập trình viên Front end chuyên nghiệp, deal lương tốt hơn.
Hôm nay hãy cùng mình học về BEM CSS để xem nó có gì hay ho nhé.
Tóm Tắt
1. BEM là gì?
Khi bạn chỉ lập trình website cho cá nhân, website nhỏ thì cách bạn tổ chức code CSS của bạn thường không phải là một vấn đề lớn.
Bạn chỉ cần tạo các tệp CSS thông thường và nhét tất cả CSS cần thiết vào đó.
Bạn có thể viết thế nào tùy thích miễn là nó chạy.
Mà không chạy cũng không sao :v.
Tuy nhiên, khi nói đến các dự án lớn hơn, phức tạp hơn thì lại là câu chuyện khác.
Lúc này cách bạn tổ chức code CSS trở nên quan trọng.
Cách cấu trúc code còn quan trọng hơn nếu bạn đang làm việc trong một nhóm bao gồm nhiều lập trình viên Front end và Back end.
> Đăng ký HỌC FRONT END ngay nếu bạn muốn học lập trình Front end chuyên nghiệp, đảm bảo khả năng đi thực tập, đi làm ngay!
Phương pháp BEM sẽ cải thiện hàng loạt khả năng bảo trì mã và tăng tốc quá trình phát triển.
Ngày nay, có rất nhiều phương pháp với mục đích giảm thiểu code CSS và làm cho code CSS của bạn dễ bảo trì hơn.
Trong bài viết này, mình sẽ giải thích và cung cấp một vài ví dụ về một trong số chúng: BEM
Bạn đang đọc: BEM BEM BEM: TÌM HIỂU BEM CSS
BEM là viết tắt của Block Element Modifier.
Ý tưởng chính đằng sau nó là tăng tốc quá trình lập trình và dễ dàng làm việc theo nhóm của các lập trình viên bằng cách sắp xếp các class CSS thành các mô-đun độc lập.
Nếu bạn từng thấy một class tên như header__form--search
, thì đó chính là BEM.
* Đừng lo lắng về tên dài, quan trọng là nó dễ đọc và dễ hiểu để giúp bạn chẳng cần ghi nhớ gì cả.
Lưu ý là phương pháp hay nhất là chỉ sử dụng BEM với các class
chứ không phải id
vì các class cho phép bạn đặt trùng tên nếu cần và tạo cấu trúc mã nhất quán hơn.
Ngoài ra, nếu bạn muốn chia trang web của mình thành các mô-đun có tổ chức, nó phải có cùng cấu trúc: block, element, modifier
Trong đó mỗi khối có thể có nhiều phần tử và cả khối và các phần tử có thể có nhiều bổ ngữ.
Tuy nhiên, trước tiên hãy bắt đầu với cấu trúc BEM cơ bản và giải thích nó bằng các ví dụ.
Block là gì?
Một block (khối) đại diện cho một đối tượng trong trang web của bạn (Hãy coi nó như những đoạn cấu trúc lớn hơn trong mã của bạn)
Hầu hết các khối phổ biến trên mọi trang web ngày nay là header, content, sidebar, footer….
Các khối trong BEM luôn là điểm khởi đầu để liên kết các lớp CSS của bạn. Hãy xem một vài ví dụ về khối:
- Một phần nội dung ( content )
- Một menu ( menu )
-
Một tính năng tìm kiếm ( search )
. content {
/ * Các thuộc tính CSS * /
}
. menu {
/ * Các thuộc tính CSS * /
}
. search {
/ * Các thuộc tính CSS * /
}
Element
Một Element (phần tử) là một thành phần trong khối thực hiện một chức năng cụ thể. Nó chỉ có ý nghĩa trong ngữ cảnh của khối của nó:
- Một bài viết ( article )
- Một thư mục nhỏ ( item )
- Một trường nhập liệu ( input )
. content__article {
/ * Các thuộc tính CSS * /
}
. menu__item {
/ * Các thuộc tính CSS * /
}
. search__input {
/ * Các thuộc tính CSS * /
}
Modifier
Modifier là chỉ sự thay đổi của một khối. Nếu bạn đã từng sử dụng Bootstrap, thì ví dụ tốt nhất sẽ là button size.
Button size là các biến thể kích thước của chính nút đó, thế nên nó là một Modifier:
- Một bài báo điển hình nổi bật ( featured )
- Một link menu ( link )
- Biểu tượng của trường tìm kiếm ( icon )
. content__article–featured {
/ * Các thuộc tính CSS * /
}
. menu__item–link {
/ * Các thuộc tính CSS * /
}
. search__input–icon {
/ * Các thuộc tính CSS * /
}
Quy ước đặt tên trong BEM
bộ chọn CSS
Kiểu BEM gốc được xác định theo cách này:
Tên block thường là một từ đơn như header
, nhưng nếu bạn muốn đặt tên block dài hơn 2 từ thì sử dụng dấu gạch ngang -
để phân tách các từ.Mục đích chính của giải pháp BEM là làm cho tên của cácmang tính thông tin và minh bạch nhất hoàn toàn có thể. được xác lập theo cách này : Tênthường là một từ đơn như, nhưng nếu bạn muốn đặt tên block dài hơn 2 từ thì sử dụng dấu gạch ngangđể phân tách những từ .
. lang-switcher {
/ * Các thuộc tính CSS * /
}
Tên Element bắt đầu bằng 2 dấu gạch dưới __
. lang-switcher__flag {
/ * Các thuộc tính CSS * /
}
Tên Modifier bắt đầu bằng một dấu gạch dưới _
. lang-switcher__flag_basic {
/ * Các thuộc tính CSS * /
}
Có một quy tắc rất quan trọng trong phương pháp BEM – một Modifier không thể được sử dụng bên ngoài ngữ cảnh của chủ sở hữu nó.
Ví dụ:
. btn_big {
/ * Các thuộc tính CSS * /
}
Bạn chỉ có thể sử dụng btn_big
nếu phần đầu cũng được định nghĩa.
Không nên làm như thế này:
div>
Mà cần phải định nghĩa btn trước như thế này:
div>
Bên cạnh những kiểu BEM ban đầu này, có những cách đặt tên thay thế như kiểu Harry Roberts hay là kiểu CamelCase.
Một ví dụ về BEM kiểu Harry Roberts:
. block-name__element-name–modifier-name {
/ * Các thuộc tính CSS * /
}
Một ví dụ về BEM kiểu CamelCase:
. BlockName__ElementName_ModifierName {
/ * Các thuộc tính CSS * /
}
Cũng có vài cái khác, nhưng hai cái này là cái phổ biến nhất.
Cá nhân mình thì yêu thích BEM kiểu Harry Roberts đề xuất, trong đó có các quy tắc sau:
- Tên được viết bằng chữ thường
-
Các từ trong tên của các thực thể BEM được phân tách bằng dấu gạch ngang
-
-
Tên Element được phân tách với tên Block bằng 2 dấu gạch dưới
__
-
Tên Modifier được phân tách với tên Element bằng dấu gạch nối đôi
--
Theo các quy tắc này thì bạn có thể dễ dàng phân biệt Block với Element với Modifier.
Đó cũng chính là lý do vì sao BEM kiểu Harry Roberts lại tốt hơn nhiều so với các kiểu khác.
Trong quy ước đặt tên của kiểu BEM gốc, Modifier sẽ được định nghĩa như thế này:
. block__element_modifier {
/ * Các thuộc tính CSS * /
}
Nhưng như bạn có thể thấy, không có nhiều sự khác biệt giữa gạch dưới đơn _
và gạch dưới kép __
.
Còn đối với BEM kiểu Harry Roberts thì dấu gạch nối đôi --
cung cấp sự phân tách rõ ràng và bạn có thể thấy rõ tên Modifier ngay lập tức:
. block__element–modifier {
/ * Các thuộc tính CSS * /
}
2. Ví dụ BEM ở các định dạng khác nhau
Xin lưu ý rằng ngoài CSS, BEM cũng rất hữu ích trong việc tổ chức các tệp JSON, XML, Tree file hoặc bất kỳ định dạng nào hỗ trợ lồng nhau.
Vì thế, hãy sử dụng phương pháp BEM như là một cách tốt nhất để xây dựng giao diện người dùng của bạn.
Hãy xem xét HTML sau, có cấu trúc ở định dạng BEM :