BEM là gì? Cơ sở thành phần của BEM và cách làm việc trên CSS

BEM đóng vai trò vô cùng quan trọng trong việc hình thành tiêu chuẩn đặt tên trên CSS. Cách ứng dụ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ợ. Để hiểu BEM là gì và cách làm việc cùng CSS, mời bạn theo dõi bài viết được FPT Shop chia sẻ sau đây!

Định nghĩa cơ bản về BEM

BEM là viết tắt của Block, Element, Modifier - một phương pháp đặt tên lớp CSS để giúp quản lý và tổ chức mã CSS một cách cấu trúc và dễ bảo trì. Được phát triển bởi Yandex, BEM chia các thành phần giao diện người dùng thành ba phần chính là Block, Element (các phần tử) và Modifier.

Khái niệm BEM cơ bản và dễ hiểu

BEM áp dụng một phương pháp rõ ràng để đặt tên lớp CSS, giúp giảm xung đột và làm cho mã nguồn dễ hiểu và dễ bảo trì. Ngoài ra, cộng đồng phát triển web cũng có thể sử dụng BEM như một nguyên tắc để tổ chức mã HTML và JavaScript.

Vai trò quan trọng của việc sử dụng BEM

BEM mang lại nhiều lợi ích quan trọng trong quá trình phát triển và bảo trì mã nguồn CSS và HTML. Dưới đây là một số lý do lớn cho thấy người dùng nên sử dụng BEM:

Tính ứng dụng cơ bản của nền tảng

Rõ ràng và dễ hiểu: BEM cung cấp một cấu trúc đặt tên rõ ràng và có ý nghĩa, giúp làm cho mã nguồn dễ hiểu và dễ bảo trì.
Giảm xung đột: Nền tảng có tác dụng giảm xung đột giữa các lớp CSS, đặc biệt khi làm việc trong các dự án lớn với nhiều nhà phát triển tham gia.
Tích hợp dễ dàng: BEM có thể dễ dàng tích hợp vào hầu hết các dự án đã tồn tại mà không cần thay đổi cấu trúc mã nguồn hiện có.
Dễ mở rộng: Phong cách lập trình BEM giúp dự án dễ dàng mở rộng và duy trì theo thời gian một cách hiệu quả.
Hỗ trợ tốt cho responsive design: Nền tảng giúp quản lý tốt các phần tử được hiển thị theo cỡ màn hình khác nhau trong responsive design.

Phân tích các thành phần của BEM chi tiết

Quy định đặt tên

Block

Block trong BEM đại diện cho phần tổng thể của một thành phần giao diện người dùng. Thành phần này thường được xem như "container" chứa các phần tử bên trong và không phụ thuộc vào bất kỳ phần tử nào khác trong giao diện. Mỗi block thường có một tên duy nhất và chứa các phần tử bên trong mà không bị phụ thuộc vào cấu trúc của trang.

Yếu tố được mô tả trên giao diện chính

Block trong BEM sở hữu cấu trúc giao diện lớn bao gồm thanh navigation, phần header, footer, form, tab, card và nhiều loại thành phần khác. Khi đặt tên cho Block, người thực hiện cần áp dụng cách mô tả duy nhất để nó có thể dễ dàng nhận diện và sử dụng trong toàn bộ mã nguồn.

td__container làm nhiệm vụ cân chiều rộng tối đa và đệm trái phải
.td__inner làm nhiệm vụ cân bằng phần đệm phía trên và điểm bám cho các phần tử tuyệt đối. VD: chỉnh một nút…
.td__header chứa tiêu đề phụ.
.td__content chứa Tiêu đề và Mô tả.
.td__footer chứa nút CTA.

Việc sử dụng block trong BEM giúp tách rời các thành phần khỏi nhau, tạo điều kiện cho việc tái sử dụng mã nguồn và phát triển một cách hiệu quả. Ngoài ra, cấu trúc block trong BEM cũng giúp giảm xung đột giữa các phần tử và thúc đẩy tính module của mã nguồn. Từ đó tạo điều kiện cho quá trình bảo trì và mở rộng dự án một cách hiệu quả.

Element

Element (Các phần tử) bên trong thường không thể tồn tại một cách độc lập mà cần được đặt vào trong một block. Hệ thống không nên phụ thuộc vào cấu trúc của trang mà chỉ phụ thuộc vào block mà chúng nằm trong.

Yếu tố phần tử được ứng dụng

Một phần tử trong BEM có thể là một thành phần cụ thể bên trong block, ví dụ: nút "submit" trong form, tiêu đề của một banner quảng cáo, một hình ảnh trong một carousel... Mỗi phần tử cần có tên duy nhất trong phạm vi của block mà nó thuộc về.

.td__headlineis size lớn của văn bản. Phong cách thường là H1 hoặc H2.
.td__intro, .td__description, làm nội dung mô tả.
.td__image chứa hình ảnh.
.td__button với nút chọn kiểu riêng trong phần này.

Mục tiêu chính của việc sử dụng các phần tử trong BEM là để tạo ra một cấu trúc rõ ràng và tái sử dụng được. Đồng thời, nó sẽ góp phần giảm thiểu sự phụ thuộc giữa các thành phần và tăng khả năng bảo trì mã nguồn.

Khi sử dụng BEM, Element xác định rõ ràng các phần tử cụ thể trong từng block và tạo điều kiện cho việc thêm, thay đổi hoặc xóa các phần tử một cách dễ dàng mà không ảnh hưởng đến các phần tử khác trong trang web.

Nhờ vào việc sử dụng phần tử trong BEM đã giúp người dùng quản lý mã nguồn và cấu trúc giao diện hiệu quả. Đồng thời, nền tảng sẽ tạo ra điều kiện phát triển và bảo trì dự án một cách dễ dàng nhất.

Modifiers

Modifiers trong BEM là các phần mở rộng hoặc biến thể của một block hoặc một phần tử. Chúng được sử dụng để chỉ định các trạng thái, kiểu dáng khác nhau hoặc các biến thể của block hoặc phần tử một cách dễ dàng.

Đây là thành phần quan trọng thứ

Modifiers cho phép thay đổi giao diện của một block hoặc phần tử mà không cần phải thay đổi mã nguồn gốc, từ đó tạo ra tính tái sử dụng và linh hoạt cho mã nguồn.

Một Modifier trong BEM thường được kết hợp với block hoặc phần tử thông qua việc thêm các lớp tên mô tả và duy nhất vào mã HTML hoặc CSS. Ví dụ, Modifier của block header có thể là "dark" để chỉ định một kiểu dáng tối cho header hoặc "highlighted" để chỉ định trạng thái nổi bật cho header.

Việc sử dụng Modifiers trong BEM giúp tạo ra các biến thể của block và phần tử một cách dễ dàng, từ đó tối ưu hóa quá trình phát triển và bảo trì mã nguồn. Thành phần có tác dụng giữ cho mã nguồn gọn gàng và giảm thiểu sự trùng lặp trong việc đặt tên lớp CSS.

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

Khi làm việc với BEM, người thực hiện nên lưu ý một số quy ước quan trọng để đảm bảo cấu trúc mã nguồn rõ ràng và dễ bảo trì. Dưới đây là một số quy ước chính khi làm việc với BEM:

Hàng loạt quy ước quan trọng được áp dụng

Tên lớp

Tên lớp trong BEM nên được đặt dựa trên cấu trúc "block__element--modifier".
Tên lớp nên được viết bằng chữ thường và sử dụng dấu gạch dưới để phân cách các từ (ví dụ: "block__element--modifier").
Tên lớp cần phản ánh chức năng và mục đích của block, phần tử hoặc modifier tương ứng.

Quá trình đặt tên

Đặt tên dựa trên chức năng chứ không dựa trên giao diện hoặc kiểu dáng.
Tránh sử dụng tên quá chung chung hoặc quá cụ thể, hãy chọn tên dựa trên ngữ cảnh sử dụng cụ thể.

Tổ chức mã nguồn

Tổ chức các lớp CSS theo cấu trúc BEM giúp tạo ra một cấu trúc mã nguồn rõ ràng và dễ bảo trì.
Sử dụng các lớp nhóm để tổ chức các block và phần tử có liên quan với nhau.

Sử dụng Modifiers

Sử dụng modifiers để chỉ định các trạng thái, kiểu dáng khác nhau hoặc các biến thể của block hoặc phần tử một cách dễ dàng.

Tạo thông tin chú thích

BEM khuyến khích việc tạo các thông tin chú thích dễ hiểu để giải thích cấu trúc lớp CSS và mục đích của chúng.

Tạm kết

Qua đây, FPT Shop đã giúp bạn đọc tìm hiểu BEM là gì và các quy ước cơ bản cần biết khi làm việc cùng công cụ. Người dùng cần tuân thủ các quy định trên để bảo đảm nguồn mã CSS và HTML được tổ chức thành một cách hiệu quả. Từ đó tối ưu hóa quá trình phát triển và bảo trì nguồn mã hóa trong dự án.

Xem thêm:

Những sản phẩm và dịch vụ do FPT Shop cung cấp đều có chất lượng cao và phù hợp với thị hiếu của khách hàng. Nếu bạn đang cần tìm kiếm một chiếc smartphone chất lượng hay máy tính có cấu hình cao thì hãy ghé thăm cửa hàng. Chúng tôi sẽ khiến bạn hài lòng với cách phục vụ và mang đến những sản phẩm giá tốt nhất thị trường.