BEM, viết tắt của Block, Element, Modifier, là 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ì. Phương pháp này được phát triển bởi Yandex và đã trở thành một trong những tiêu chuẩn phổ biến trong cộng đồng phát triển web để tạo ra các thành phần có thể tái sử dụng và dễ dàng bảo trì ## Khái niệm cơ bản của BEM ### Block Block là thành phần cấp cao nhất trong BEM, đại diện cho một đối tượng độc lập trên trang web. Một block có thể là một header, footer, sidebar, hoặc bất kỳ thành phần lớn nào khác. Block được thiết kế để có thể tồn tại độc lập mà không phụ thuộc vào các thành phần khác trên trang Ví dụ về block: ```html ``` ### Element Element là một phần của block, không thể tồn tại độc lập mà phải trong một block. Element đại diện cho các thành phần con bên trong block, như nút, liên kết, hoặc tiêu đề trong một header[2]. Ví dụ về element: ```html ``` ### Modifier Modifier là một biến thể hoặc trạng thái của một block hoặc element. Nó được sử dụng để tạo các kiểu biến thể, như một nút màu đỏ hoặc một header có nền đậm. Ví dụ về modifier: ```html

``` ## Lợi ích của việc sử dụng BEM 1. **Tái sử dụng**: BEM giúp phát triển các thành phần có thể tái sử dụng, giảm thiểu sự lặp lại và tăng cường tính nhất quán trên trang web. 2. **Bảo trì**: Cấu trúc rõ ràng và quy ước đặt tên giúp dễ dàng bảo trì và cập nhật mã nguồn. 3. **Phát triển độc lập**: Các nhà phát triển có thể làm việc độc lập trên các thành phần khác nhau mà không ảnh hưởng đến nhau. ## Ví dụ thực tế về BEM Giả sử bạn đang xây dựng một trang web bán hàng và cần một thanh tìm kiếm với các biến thể. Dưới đây là cách bạn có thể sử dụng BEM để cấu trúc mã HTML và CSS của mình: ### HTML ```html

``` ### CSS ```css .search {} .search__input { padding: 8px; border: 1px solid #ccc; } .search__button { padding: 8px 16px; background-color: #eee; border: none; cursor: pointer; } .search__button--primary { background-color: #007BFF; color: #ffffff; } ``` Trong ví dụ này, `.search` là block, `.search__input` và `.search__button` là các element, và `.search__button--primary` là modifier cho button, thể hiện nút chính trong giao diện. ## Kết luận BEM là một phương pháp hữu ích và mạnh mẽ để tổ chức CSS, giúp các nhà phát triển web dễ dàng quản lý và bảo trì mã nguồn của mình. Bằng cách áp dụng BEM, bạn có thể tạo ra các thành phần rõ ràng, có thể tái sử dụng và dễ dàng thích ứng với các thay đổi trong dự án. source: viblo

Bài viết về chủ đềBEM

Tổng hợp các bài viết về BEM

Tìm hiểu về BEM và cách sử dụngCSSBEM

Chủ đề phổ biến

Tìm hiểu về BEM và cách sử dụng