Sử dụng BEM như thế nào là hợp lý?

Giới thiệu

Đặt tên là 1 trong những vấn đề đau đầu nhất trong khoa học, đặt tên class hay biến, hàm... trong lập trình web của chúng ta cũng vậy. Trước đây thì việc đặt class khá tự do và không có quy chuẩn nào chung, nhưng từ khi BEM ra đời, mọi thứ đã khác đi. Tuy nhiên với ai mới tiếp cận BEM thì chắc chắn sẽ có những băn khoăn, mình viết bài này để giới thiệu 1 số vấn đề mà mình hiểu, mọi người hãy góp ý nếu thấy gì chưa đúng để cùng tìm ra cách sử dụng BEM hợp lý nhất nhé.

BEM là gì và cách dùng?

BEM gồm 3 phần. Block-Elements-Modifiers:

Blocks : là thành phần độc lập về mặt chức năng và logic của trang web, block có thể lồng trong nhau và được lặp lại

Elements: là các thành phần con trong block

Modifiers: bạn hãy hiểu là chúng ta có 1 số kiểu button trong 1 trang web, đa số là màu xanh, ta sẽ cho button mặc định màu xanh, với trường hợp button màu đỏ, ta sẽ thêm hậu tố để phân biệt

Các đặt tên theo BEM sẽ như thế này: .block__element--modifier

Cách chia block thì các bạn hãy để ý các page, chia page ra thành các phần riêng biệt có thể tái sử dụng ở nhiều nơi cả trong 1 page và nhiều page, nếu nó chỉ có trong 1 page thì có thể đặt tên theo page đó còn nếu nó dùng chung cho nhiều page thì hãy tìm 1 cái tên chung chung, ví dụ block text-box chỉ có trong page giới thiệu thì có thể đặt nó là "text-box-intro" sẽ dễ hình dung, còn nếu nhiều page có cái text-box tương tự thì hãy đặt là "text-box" mà thôi.

1. Elements: Nhiều người mới tiếp cận sẽ thắc mắc, ta có 1 block, trong có element, trong element lại có thành phần con nữa, thì chả lẽ lại đặt là block__element1__element2 ? Câu trả lời là không nên, sau khi chúng ta đã xác định được block trong trang web, tất cả những phần tử con bên trong block đều nên đặt theo block chứ ko phải đặt từ ngoài vào trong. Nên chúng ta sẽ đặt như này: block__element1, block__element2

Ví dụ ta có block giới thiệu phim đang hot như này, giả sử đặt là film-hot đi