Bem là gì? Các quy ước cần nắm rõ khi làm việc với Bem

Bem là gì – Đang là câu hỏi đang được rất nhiều bạn trẻ thắc mắc hiện nay đặc biệt là với một Front-End Developer. Hoặc, khi bạn tham gia vào một dự án web cũng như đọc một mã nguồn sẽ nhìn thấy được các classes của web. Khi đó, bạn sẽ tò mò rằng tại sao họ có thể làm được như vậy. Các thông tin chia sẻ trong bài viết sau, sẽ giúp bạn giải đáp toàn bộ những nghi vấn này. 

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

Đáp án cho câu hỏi Bem là gì được các chuyên gia giải đáp như sau. 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.  

Bem được định nghĩa như thế nào?

Bem được định nghĩa như thế nào?

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. 

Các thành phần trong tên của Bem

Các thành phần trong tên của Bem

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. 

Bạn đọc tham khảo thêm: MVC là gì? Tổng quan về MVC trong lập trình

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. 

Cách sử dụng Bem hiệu quả nhất

Cách sử dụng Bem hiệu quả nhất

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é. 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *