BEM là gì? Các thành phần cơ bản của BEM? Các biến thể của BEM và quy trình áp dụng BEM để làm một dự án thực tế?

Định nghĩa BEM là gì?

BEM là từ viết tắt của Block-Element-Modifier. Đây là một trong những tiêu chuẩn liên quan đến quy ước đặt tên cho các tên lớp CSS.  

Khi đặt tên theo những tiêu chuẩn này sẽ hỗ trợ cho các lập trình viên frontend có thể hiểu được đoạn code có nghĩa gì hoặc nó thực hiện nhiệm vụ gì. Từ đó, những lập trình viên khác đọc đoạn code của bạn họ vẫn có thể hiểu được rằng bạn đang làm gì. Từ đó, quá trình phân tích, thay đổi cũng như quản lý sẽ trở nên dễ dàng hơn. 

Tại sao lập trình viên nên sử dụng Bem?

Trong toàn bộ các dự án nhỏ thì Bem sẽ chưa cần thiết phải sử dụng. Tuy nhiên, với những dự án lớn hoặc trong khi làm việc nhóm thì Bem trở thành một trong những yếu tố vô cùng quan trọng. 

Và, một trong những lý do giúp cho Bem trở nên đặc biệt quan trọng là: 

• Bem có thể hỗ trợ cho một nhóm làm việc cùng nhau dễ dàng hơn. Khi thực hiện dự án Teamwork, mỗi một thành viên sẽ có quyền đặt một class riêng biệt và sẽ không bị conflict với nhau. Việc sử dụng bem sẽ giúp lập trình viên loại bỏ được vấn đề này nhờ cấu trúc rõ ràng và dễ tuân thủ khi sử dụng. 
• Hỗ trợ Modules: Mỗi một class của block thường không dễ bị ảnh hưởng từ những yếu tố khác. Vì vậy, bạn không cần phải lo lắng CSS của class này sẽ ảnh hưởng đến những class khác. 
• Hỗ trợ cho việc tái sử dụng lại. Lập trình viên hoàn toàn có thể soạn lại các block độc lập với nhau rồi dùng chúng một cách tự nhiên. Từ đó, giảm thiểu được tối đa số lượng code CSS.
• Bem hỗ trợ cung cấp cấu trúc vững chắc, đơn giản và dễ hiểu cho CSS của bạn.

Thành phần cơ bản của Bem là gì?

Hiện nay, Bem được sử dụng vô cùng rộng rãi và và được quy ước thành 2 loại chính là quy ước đặt tên và quy ước khi làm việc. 

Cụ thể về vấn đề này như sau: 

Bem trong quy ước đặt tên

Bem sẽ được sử dụng bằng các quy ước đặt tên như sau: 

Block

Đây là một trong những thành phần quan trọng nhất của một ứng dụng hoặc trang web. Một thành phần của Dom cũng có thể là block. Phần block này có thể là phần header, content, footer hoặc body. 

Elements

Đây là một trong những thành phần quan trọng của một block nó không tồn tại độc lập nếu như không có block. Chúng đều hoạt động phụ thuộc vào parent block của chính nó. 

Trong đó, tất cả các phần tử đều sẽ được biểu thị dưới dạng dấu gạch dưới kép. Cụ thể như sau: 

• .td_healine là các dạng Text cỡ lớn thường stype sẽ là H1 hoặc H2. 
• .Td_Intro, .td_description đuộc dùng để làm mô tả content. 
• .td_image dùng để chứa ảnh
• .td_button với style dành riêng cho các button có trong section này. 

Modifiers

Được sử dụng nhiều với mục đích thao tác thay đổi các cách hiển thị ở trên phần block hoặc các phần tử. Cụ thể như: 

Nếu như bạn muốn tạo ra thêm block khác mà muốn tạo đi thêm một class. Khi đó, .block_elem–hightlight được sử dụng để tạo ra sự khác biệt. 

Quy ước khi Bem làm việc

Khi thực hiện một project thì chúng ta cần nắm rõ rằng guide và stype với những component. Việc sử dụng chung sẽ giúp bạn có thể tái sử dụng và tạo ra sự tồn tại độc lập với những component khác.

Một vài quy ước khác như sau: 

• Tên selector của component sẽ được đặt là namespace. 
• Người dùng sẽ không được đặt một class con dưới dạng sau: 

.block_parent_eye mà chúng sẽ được sử dụng để có thể miêu tả lại mối quan hệ giữa các khối và các phần tử với nhau dưới dạng: .block_parent–eye. 

• Giữ nhiệm vụ duy trì tính modules
• Hạn chế sử dụng để viết CSS cho các id. Cụ thể là một số trường hợp được dùng ưu tiên trong CSS. 

Biến thể của Bem là gì?

Thông thường, nếu như xuất hiện sự thay đổi về style modifier thì bạn cần phải chèn thêm thuộc tính # lên các thuộc tính cũ. Vì vậy: 

• Bạn hoàn toàn có thể biến thể chúng về dưới dạng Bem để cho quá trình viết được đơn giản hơn. Khi đó, nó sẽ cung cấp cho chúng ta sự linh hoạt nhất định để xác định được một cấu hình module nhất định bất kỳ. 
• Phù hợp với nhiều module với nhiều dạng sửa đổi. Đây là điều hữu ích giúp cho mọi phần tử tạo lên được với giao diện của người dùng. 

Chính vì vậy, bem được xem như một quy ước đặt tên rất hữu ích. Nó mạnh mẽ, đơn giản giúp cho code của bạn dễ đọc hơn, rõ ràng hơn và trở nên nghiêm ngặt hơn. 

Quy trình áp dụng Bem để làm dự án Front-end thực tế

• Trước khi bắt đầu cho một dự án, thông thường bạn cần xem rõ guide va style gồm những component nào có thể dùng chung. Khi đó, bạn sẽ tái sử dụng được và tồn tại độc lập với những component khác. 
• Những tên selector của component thường sẽ được đặt là namespace. 
• Cần áp dụng với các quy tắc Bem ở trên để có thể xây dựng website. 

Hy vọng, thông qua những thông tin mà chúng tôi đã chia sẻ ở phía trên bạn đã tìm ra đáp án cho câu hỏi Bem là gì? Nếu như muốn hiểu rõ hơn về giao diện của website hoặc bạn đang làm một công việc liên quan đến nó. Đừng quên tìm hiểu kỹ lưỡng hơn về Bem nhé.