Quy tắc đặt tên BEM
Quy tắc đặt tên BEM (Block-Element-Modifier)
BEM là một quy ước đặt tên CSS phổ biến được sử dụng để tổ chức và quản lý các class CSS trong các ứng dụng web. Nó giúp viết code CSS dễ đọc, dễ bảo trì và dễ mở rộng.
Quy tắc BEM dựa trên ba thành phần chính:
1. Block (Khối):
Đại diện cho một thành phần độc lập và có thể tái sử dụng trong giao diện người dùng.
Tên của block thường là một danh từ đơn giản mô tả chức năng hoặc mục đích của nó.
Ví dụ:
header,button,form,card, v.v.
2. Element (Phần tử):
Đại diện cho một phần con bên trong block.
Tên của element được nối với tên của block bằng hai dấu gạch dưới (
__).Ví dụ:
header__title,button__label,form__input,card__body, v.v.
3. Modifier (Biến thể):
Được sử dụng để mô tả các trạng thái hoặc biến thể khác nhau của block hoặc element.
Tên của modifier được nối với tên của block hoặc element bằng hai dấu gạch ngang (
--).Giá trị của modifier (nếu có) được nối với tên modifier bằng dấu hai chấm (
:).Ví dụ:
button--primary,form__input--disabled,card__body--active, v.v.
Cấu trúc tên class BEM:
Ví dụ:
Ưu điểm của BEM:
Dễ đọc và dễ hiểu: Tên class BEM mô tả rõ ràng cấu trúc và chức năng của các thành phần CSS.
Dễ bảo trì: Việc tìm kiếm và sửa đổi các class CSS cụ thể dễ dàng hơn.
Dễ mở rộng: Việc thêm các biến thể hoặc trạng thái mới cho các thành phần CSS đơn giản và hiệu quả.
Tái sử dụng: Các class CSS BEM có thể được tái sử dụng trong các phần khác nhau của giao diện người dùng.
Nhược điểm của BEM:
Có thể dài dòng: Tên class BEM có thể trở nên dài dòng khi có nhiều modifier hoặc nested elements.
Cần học tập: Việc học và sử dụng quy tắc BEM đòi hỏi thời gian và nỗ lực.
Kết luận:
BEM là một quy ước đặt tên CSS hiệu quả giúp viết code CSS dễ đọc, dễ bảo trì và dễ mở rộng. Tuy nhiên, cần cân nhắc kỹ lưỡng nhu cầu của dự án và sở thích cá nhân trước khi áp dụng quy tắc BEM.
Last updated