Xin chào các bạn, chúng ta lại gặp nhau tại w8 và trong video này, chúng ta sẽ tiếp tục đề cập đến quy chuẩn BEM và cách đặt tên khi các Block lồng nhau. Trong các video trước, tôi đã mô tả hai ví dụ giữa Block 1 và Block 2, giúp các bạn hiểu rõ hơn về quy chuẩn này và cách sử dụng modifier một cách hợp lý.
Tuy nhiên, một số bạn có thể gặp khó khăn khi đặt tên các Block lồng nhau. Ví dụ, khi một Block chứa nhiều Block con bên trong, làm sao để đặt tên phù hợp? Hôm nay, chúng ta sẽ giải đáp thắc mắc này cùng nhau.
Đặt tên cho Block lồng nhau
Khi các Block lồng nhau, chúng ta cần xem xét từng trường hợp để đặt tên phù hợp. Dưới đây là một số gợi ý để giải quyết vấn đề này:
Trường hợp Block con là thành phần dùng chung
Nếu Block con không phải là thành phần độc lập mà được sử dụng chung, chúng ta có thể đặt tên như thường. Ví dụ, nếu chúng ta có một thành phần giao diện cụ thể như “button”, chúng ta có thể sử dụng tên “button__icon” để chỉ phần icon bên trong Button.
Trường hợp Block con là thành phần riêng của Block cha
Nếu Block con là một thành phần riêng biệt và thuộc riêng của Block cha, chúng ta có thể đặt tên theo cấu trúc “blockelement”. Ví dụ, nếu chúng ta có một Block “header” và một Block con “headersearch”, chúng ta có thể sử dụng tên “header__search” cho phần tìm kiếm bên trong header.
Trường hợp Block con chứa nhiều thành phần
Trong trường hợp Block con chứa nhiều thành phần khác, chúng ta có thể tách riêng từng thành phần ra và sử dụng tên riêng cho mỗi thành phần. Ví dụ, nếu chúng ta có một Block “sidebar” và bên trong có một phần “sidebarmenu” và một phần “sidebarprofile”, chúng ta có thể đặt tên “sidebarmenu” cho phần menu và “sidebarprofile” cho phần thông tin cá nhân.
Điều quan trọng là chúng ta cần tách riêng và đặt tên một cách có ý nghĩa cho từng thành phần, để giúp dễ hiểu và dễ bảo trì.
Những lưu ý khi đặt tên
Dưới đây là một số lưu ý khi đặt tên các Block lồng nhau:
- Tránh đặt tên gây hiểu nhầm: Đảm bảo đặt tên sao cho không gây hiểu nhầm với các lập trình viên khác. Tránh sử dụng các từ ngữ mà có thể bị hiểu sai lầm.
- Giữ chuẩn men và thống nhất: Luôn tuân thủ quy chuẩn BEM và đặt tên một cách nhất quán để giữ cho code dễ đọc và dễ bảo trì.
- Đặt tên ngắn gọn và dễ hiểu: Sử dụng các từ ngắn gọn và dễ hiểu để đặt tên các Block, Element và Modifier. Điều này giúp dễ nhìn và hiểu code hơn.
Với những lưu ý và gợi ý trên, chúng ta có thể đặt tên các Block lồng nhau một cách dễ dàng và hợp lý. Tuy nhiên, cách đặt tên có thể khác nhau tùy thuộc vào từng trường hợp và cách tư duy của mỗi người.
Tác giả: COMDY
Để biết thêm thông tin về quy chuẩn BEM và các kỹ thuật SEO hữu ích khác, hãy truy cập Comdy.