BEM là gì? Quy tắc đặt tên CSS chuẩn BEM dễ hiểu, chính xác

Trong lĩnh vực lập trình và phát triển web, việc quản lý CSS cho các dự án phức tạp quả thật là một cơn ác mộng đối với developer. Khi cơ sở mã code quá nhiều sẽ có thể biến chương trình thành một mớ hỗn độn, khiến việc mở rộng và bảo trì trở nên khó khăn hơn bao giờ hết. Theo đó, BEM được ra đời với mục tiêu trở thành tiêu chuẩn đặt tên của CSS. Nhờ đó, ứng dụng trở nên trực quan, logic, giúp lập trình viên dễ dàng quản lý mã nguồn HTML và CSS một cách hiệu quả. Tuy có vai trò đặc biệt quan trọng trong lĩnh vực phát triển phần mềm nhưng BEM là gì vẫn là một khái niệm khá mơ hồ với nhiều người. Bài viết dưới đây, Học Viện Công Nghệ Thông Tin – Hướng Nghiệp Á Âu sẽ giúp bạn tìm hiểu định nghĩa BEM và cách đặt tên CSS đúng quy chuẩn.

Hệ thống BEM góp phần cải thiện quá trình đọc hiểu và

mở rộng nhiều công cụ hỗ trợ cho chương trình (Ảnh: Internet)

BEM CSS là gì?

BEM là tên viết tắt của Block – Element – Modifier, là một phương pháp đặt tên cho các lớp CSS để hỗ trợ việc quản lý và tổ chức các mã nguồn CSS một cách logic và dễ bảo trì.

Bạn thử tưởng tượng, khi bước vào một thư viện mà các cuốn sách không được sắp xếp ngay hàng thẳng lối, bạn sẽ gần như không thể tìm thấy thứ bạn đang tìm kiếm. Tương tự, trong một chương trình chằng chịt mã code, BEM có một quy ước đặt tên rất rõ ràng cho các lớp CSS, hỗ trợ đắc lực cho lập trình viên trong việc tìm kiếm, phát triển và mở rộng chương trình.

Nền tảng này được được thiết kế và phát triển bởi Yandex – một trong những công ty công nghệ đình đám nhất tại Nga. Sử dụng BEM giúp các lập trình viên thuận tiện hơn trong việc xây dựng các kiến trúc lập trình trong cơ sử dữ liệu front-end bởi nó có thể chia nhỏ các thành phần trong giao diện người dùng thành 3 phần tử chính là Block, Element và Modifier.

Ngoài ra, các nhà phát triển còn có thể sử dụng BEM như một nguyên tắc hoàn hảo để tổ chức các mã HTML và JavaScript.

Việc đặt tên CSS theo tiêu chuẩn BEM giúp lập trình viên dễ dàng

nhận biết đoạn code đó đang có ý nghĩa gì và nó thực hiện chức năng gì (Ảnh: Internet)

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

BEM mang đến nhiều lợi ích tuyệt vời cho các lập trình viên trong việc tổ chức và quản lý các mã CSS, thậm chí là HTML, JavaScript một cách gọn gàng, trật tự và có hệ thống:

Rõ ràng và dễ hiểu: BEM hàm chứa một quy ước đặt tên chi tiết, chính xác, làm cho các cơ sở mã nguồn trở nên ngắn gọn, súc tích, giúp tiết kiệm thời gian làm việc của lập trình viên.
Dễ dàng mở rộng và bảo trì: Ứng dụng BEM giúp nền tảng hệ thống trở nên đơn giản hóa, tạo điều kiện thuận lợi để developer tích hợp thêm nhiều tính năng mới và duy trì dự án theo thời gian.
Giúp quá trình teamwork hiệu quả hơn: Trong quá trình làm việc nhóm, để tránh tình trạng mỗi thành viên đặt tên các lớp CSS theo một cấu trúc riêng, BEM sẽ loại bỏ vấn đề này nhờ cấu trúc rõ ràng và nhất quán, buộc các lập trình viên phải tuân thủ.
Tích hợp nhanh chóng: BEM có thể được thêm một cách dễ dàng vào các chương trình mới hoặc dự án đang hoạt động mà không cần phải thay đổi cấu trúc mã nguồn hiện có.

BEM phát huy nhiều tác dụng quan trọng đối với các dự án lớn, có nhiều nhà phát triển cùng tham gia (Ảnh: Internet)

Nguyên tắc đặt tên chi tiết cho các thành phần của BEM

Block

Block là thành phần cấp cao nhất, đóng vai trò là nền tảng cho cấu trúc mã của bạn. Mỗi block thường có một tên duy nhất và chứa đựng các phần tử bên trong mà không phụ thuộc vào cấu trúc của trang.

Block cho phép lập trình viên mô tả các đối tượng đang đề cập đến, ví dụ như: “menu”, “header”, “post”, “product”…

Tên block có thể bao gồm các chữ cái Latinh, chữ số và dấu gạch ngang.
Tạo CSS class đơn giản bằng cách thêm một tiền tố vào phía trước. VD: .block

Element

Đây là thành phần của một khối cụ thể, được tách khỏi tên khối bằng hai dấu gạch dưới (__). Tên của các element có thể là: “title”, “content”, “link”, “price”…

Tên của element có thể bao gồm các chữ số, chữ cái Latinh, dấu gạch dưới và dấu gạch ngang.
Tạo CSS class theo nguyên tắc: tên block cộng hai dấu gạch dưới và tên element. VD: .block__element

Modifier

Đây là thành phần tùy chọn, có thể có hoặc không, được thiết lập để mô tả các biến thể của block và element. Thành tố này được ngăn cách với element bởi hai dấu gạch ngang (––). Tên của các modifier ví dụ như: “big”, “small”, “primary”, “success”…

Tên của modifier có thể bao gồm chữ cái Latinh, chữ số, dấu gạch ngang và dấu gạch dưới.
Tạo class CSS bao gồm: tên của block hoặc element cộng hai dấu gạch ngang và tên của modifier. VD: .block__element––modifier

Một số tên thường gặp để mô tả 3 thành phần block, element và modifier trong cấu trúc BEM (Ảnh: Internet)

Quy ước khi làm việc với BEM

Quá trình đặt tên: Đặt tên trong BEM bắt buộc phải dựa trên chức năng của đoạn code, chứ không dựa trên giao diện người dùng.
Tổ chức mã nguồn: Luôn tuân theo định dạng BEM của block__element–– Việc sử dụng cấu trúc này một cách nhất quán sẽ giúp mã của bạn dễ dự đoán, dễ hiểu và dễ bảo trì hơn.
Tên lớp: Tên lớp luôn được viết bằng chữ thường và sử dụng dấu gạch dưới/dấu gạch ngang để phân tách các thành phần trong tên. Tránh đặt tên lớp theo kiểu chung chung mà hãy đặt trên dựa trên ngữ cảnh sử dụng cụ thể. Giữ tên lớp của bạn càng ngắn càng tốt nhưng vẫn mô tả đầy đủ tính năng bởi tên quá dài có thể khiến HTML khó đọc và khó thực thi hơn.
Sử dụng modifier: Lập trình viên nên cân nhắc sử dụng thêm thành tố modifier để chỉ định các trạng thái của block/element một cách dễ dàng và chi tiết.
Tạo thông tin chú thích: Developer nên tạo chú thích để diễn giải cấu trúc của từng lớp CSS và chức năng của chúng.

Nhà phát triển cần lưu ý một số quy ước quan trọng khi đặt tên BEM

để đảm bảo cấu trúc mã nguồn rõ ràng và dễ bảo trì (Ảnh: Internet)

BEM là một thuật ngữ vô cùng quen thuộc với các lập trình viên front-end. Dù bạn đang xây dựng một trang web nhỏ hay một phần mềm lớn, thì việc áp dụng cấu trúc đặt tên lớp rõ ràng và có tổ chức theo phương pháp BEM sẽ giúp quản lý, bảo trì mã nguồn dễ dàng và hiệu quả hơn. Đây cũng là một trong những kiến thức quan trọng thường được đưa vào giảng dạy tại các khóa học lập trình ngắn hạn dành cho người mới bắt đầu.

Hy vọng bài viết đã giúp bạn có cái nhìn tổng quan hơn về khái niệm BEM là gì và lợi ích thực tế khi áp dụng trong dự án. Đừng quên theo dõi những bài viết tiếp theo của Học Viện Công Nghệ Thông Tin – Hướng Nghiệp Á Âu để cập nhật thêm nhiều kiến thức hữu ích trong lĩnh vực IT nhé!