Hướng dẫn cách sử dụng quy tắc đặt tên BEM trong CSS

BEM là một phương pháp hữu ích giúp chúng ta đặt tên cho các lớp CSS một cách rõ ràng và dễ hiểu. BEM là viết tắt của Block (Khối), Element (Phần tử) và Modifier (Biến thể). Dưới đây là phân tích chi tiết về từng khái niệm trong BEM.

BEM là gì?

• Block (Khối): Đây là những phần lớn trên trang web có thể hoạt động độc lập, chẳng hạn như các thành phần như nút, tiêu đề hoặc khung chứa. Ví dụ, một khối có thể là một nút với các thuộc tính riêng biệt.
• Element (Phần tử): Đây là những phần nhỏ hơn nằm bên trong một khối. Chúng không thể tồn tại độc lập mà phải gắn liền với khối mà chúng thuộc về. Ví dụ, một khối nút có thể có phần tử như biểu tượng của nút, được đặt tên là button__icon, hoặc tiêu đề của một khối tiêu đề, được đặt tên là header__title.
• Modifier (Biến thể): Đây là cách để thay đổi hình thức hoặc hành vi của một khối hoặc phần tử. Các biến thể giúp chúng ta điều chỉnh kiểu dáng hoặc chức năng của các thành phần mà không cần tạo ra các khối hoặc phần tử mới. Ví dụ, một nút có thể có biến thể chính với tên button--primary, hoặc tiêu đề của khối có thể có biến thể lớn với tên header__title--large.

Cú pháp BEM

BEM sử dụng một cách thức cụ thể để đặt tên cho các thành phần:

• Block (Khối): block-name
• Element (Phần tử): block-name__element-name
• Modifier (Biến thể): block-name--modifier-name hoặc block-name__element-name--modifier-name

Phương pháp này không chỉ làm cho mã nguồn trở nên dễ đọc hơn mà còn giúp việc bảo trì và mở rộng mã trở nên hiệu quả hơn trong quá trình phát triển ứng dụng. Việc áp dụng quy tắc BEM sẽ giúp cho các nhà phát triển dễ dàng hiểu được cấu trúc và mối quan hệ giữa các thành phần trên trang web.

Ví dụ

Dưới đây là một ví dụ dễ hiểu về cách sử dụng phương pháp BEM (Block, Element, Modifier) với HTML và CSS:

Khối (Block)

Khối là phần chính của giao diện. Ví dụ, chúng ta có một khối menu.

HTML:

<div class="menu"></div>

CSS:

.menu {
    background-color: #f0f0f0; /* Màu nền cho menu */
    padding: 20px; /* Khoảng cách bên trong menu */
}

Phần tử (Element)

Phần tử là các thành phần bên trong khối. Ví dụ, trong khối menu, chúng ta có các mục menu.

HTML:

<div class="menu">
    <div class="menu__item">Mục 1</div>
    <div class="menu__item">Mục 2</div>
</div>

CSS:

.menu__item {
    color: #333; /* Màu chữ cho các mục menu */
    margin: 10px 0; /* Khoảng cách giữa các mục menu */
}

Bộ điều chỉnh (Modifier)

Bộ điều chỉnh được sử dụng để thay đổi kiểu dáng hoặc trạng thái của khối hoặc phần tử. Ví dụ, chúng ta có thể có một menu lớn và một mục menu đang hoạt động.

HTML:

<div class="menu menu--large">
    <div class="menu__item menu__item--active">Mục 1</div>
    <div class="menu__item">Mục 2</div>
</div>

CSS:

.menu--large {
    font-size: 20px; /* Kích thước chữ cho menu lớn */
}

.menu__item--active {
    font-weight: bold; /* Đối với mục đang hoạt động, chữ sẽ đậm hơn */
}

Tóm tắt

• Block (Khối): .menu – Phần chính của giao diện.
• Element (Phần tử): .menu__item – Các thành phần trong khối.
• Modifier (Bộ điều chỉnh): .menu--large, .menu__item--active – Thay đổi kiểu dáng hoặc trạng thái của khối hoặc phần tử.

Cách tổ chức này giúp mã nguồn dễ đọc và dễ bảo trì hơn.

Tại sao nên sử dụng BEM?

Khả năng đọc hiểu (Readability)

BEM (Block Element Modifier) cung cấp một hệ thống đặt tên rõ ràng cho các thành phần trong CSS. Mỗi tên gọi đều mang ý nghĩa cụ thể, giúp lập trình viên dễ dàng nhận biết chức năng và vai trò của từng phần trong mã nguồn. Điều này không chỉ giúp người viết mà còn hỗ trợ những người khác trong việc tiếp cận và hiểu mã nguồn nhanh chóng.

Dễ bảo trì (Maintainability)

Sử dụng BEM giúp việc cập nhật và quản lý các kiểu dáng trở nên đơn giản hơn. Khi mã nguồn được tổ chức một cách khoa học, việc sửa đổi hoặc bổ sung các kiểu mới cũng sẽ dễ dàng hơn, giảm thiểu rủi ro gây ra lỗi không mong muốn trong quá trình phát triển.

Khả năng mở rộng (Scalability)

BEM giúp tránh xung đột tên và giữ cho mã nguồn nhất quán, đặc biệt trong các dự án lớn với nhiều thành viên tham gia. Khi có nhiều nhóm phát triển khác nhau, hệ thống đặt tên rõ ràng của BEM đảm bảo rằng không có sự chồng chéo giữa các lớp CSS, từ đó giúp tăng tính khả thi của dự án trong tương lai.

Một số mẹo thực tiễn

• Tuân thủ quy tắc đặt tên nhất quán:
  Hãy luôn tuân thủ các quy tắc cú pháp của BEM để đảm bảo rằng mã của bạn dễ đọc và dễ hiểu. Điều này không chỉ giúp bạn mà còn giúp đội ngũ phát triển dễ dàng làm việc cùng nhau.
• Sử dụng tên có ý nghĩa:
  Đặt tên cho từng khối, phần tử hoặc bộ điều chỉnh một cách có ý nghĩa sẽ giúp mọi người hiểu được mục đích của từng phần trong mã nguồn. Tránh việc sử dụng các tên gọi mơ hồ và không rõ ràng.
• Tránh lồng ghép quá mức:
  Cấu trúc của mã nên được giữ đơn giản để dễ dàng quản lý. Việc lồng ghép quá nhiều cấp độ có thể làm cho mã trở nên phức tạp và khó bảo trì.
• Sử dụng BEM với các trình biên dịch:
  Kết hợp BEM với các công cụ như Sass hoặc LESS có thể mang lại nhiều lợi ích, vì chúng giúp tổ chức mã tốt hơn và tạo ra các kiểu dáng linh hoạt hơn.

Kết luận

Việc áp dụng BEM trong CSS không chỉ làm cho mã của bạn dễ hiểu và dễ quản lý mà còn tạo ra một cấu trúc rõ ràng cho các stylesheet. Khi bạn tuân thủ những nguyên tắc đơn giản về khối, phần tử và bộ điều chỉnh, bạn sẽ thấy mã của mình trở nên gọn gàng và tổ chức hơn bao giờ hết. Chúc bạn lập trình vui vẻ!