BEM là gì? Và tại sao nên dùng BEM?

BEM là gì? Và tại sao nên dùng BEM? Đối với một lập trình viên Front-end thì việc biết BEM là gì khá quan trọng. Trong bài viết này mình sẽ trả lời 2 câu hỏi trên, cũng như đâu sâu vào chi tiết.

Có thể bạn thích: Hướng dẫn sử dụng plugin Page Builder của SiteOrigin

Giới thiệu

Tại một dự án nhỏ, như landing page hay website cá nhân việc bạn tổ chức sắp xếp styles của bạn không phải là một vấn đề lớn. Bạn vào đó, viết một chút CSS hay là SASS. Biên soạn và ghộp nó thành một file nhỏ gọn và đẹp.

Tuy nhiên, khi dự án “phình to” và phức tạp hơn, việc sắp xếp tổ chức code của bạn là rất quan trọng theo 3 hướng sau: ảnh hưởng đến thời gian bạn viết code, số lượng code bạn phải viết và khối lượng việc mà trình duyệt phải xử lý. Nó đặc biệt quan trọng khi bạn làm việc nhóm, và khi bạn ở cấp cao hơn.

BEM là gì?
BEM là gì?

BEM là gì?

BEM (Block, Element, Modifier) là một trong những cách đặt tên class CSS phổ biến nhất. Nó dựa trên ba thành phần thiết yếu sau: blocks, elements và modifiers. (khối, thành phần và phần chỉnh sửa)

Điều đầu tiên cần nhớ khi đặt tên class:

  • Tên nên được sử dụng với số và chữ viết thường (ko caplock nhé)
  • Các từ trong Tên nên được tách ra bởi gạch ngang (-)
  • Chỉ sử dụng class khi viết block, element và modifier

Hãy tìm hiểu về các thành phần riêng biệt này và sử dụng chúng!

Block

Block là tên class đứng đầu trong một thành phần mới toanh. Đặc điểm chính của block là việc tái sử dụng chúng bất kì đâu trên một trang. Và, các blocks này có thể nằm trong các blocks khác.

Block
Block

Tên một block nên được đặt rõ ràng theo thành phần nào mà nó chịu trách nhiệm cho. Ví dụ, mềnh đặt tên class .btn nó dùng để định hình các nút.

Element

Element là thành phần của một block nó được giao việc trong block hoy và nó không được dùng ở ngoài block.

Element
Element

Tên của một element dựa trên tên block và tên element. Tên element được tách ra bởi hai phát gạch chân ( __ ). Như ví dụ bên trên, chúng ta tạo ra elements là .btn__category và .btn_name.

Modifier

Mỗi modifier là một “lá cờ” nó được dùng đánh dấu cho block hoặc element. Sử dụng để thanh đổi giao diện hay “hành vi” của element. Modifiers cũng được sử dụng như một thành phần riêng biệt.

Modifier
Modifier

Tên của modifier được định nghĩa bởi tên block hoặc element mà nó muốn “modify” với 2 phát gạch ngang ( — ).

Hãy xem toàn bộ ví dụ này:

See the Pen bEQvmW by Anita (@smotchi) on CodePen.0

Tóm lại

Các bác hãy nhớ rằng, sẽ mất thời gian để làm quen mới cách đặt tên class mới này. Tuy nhiên nó sẽ xứng đáng thôi. Lợi ích của việc sử dụng BEM là không thể lường trước được dựa trên thời gian bạn học và làm quen với nó.

Cuối cùng, cuối và quan trọng nhất – nhẫn nại. Nếu bạn quyết định một cái gì đó, hãy bắt đầu sử dụng nó ngay từ đầu cho đến cuối dự án. Hi vọng việc BEM là gì đã có hữu ích cho bạn, để lại comment cho mình biết ý kiến của bạn nhé.

3
Leave a Reply

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Vinh Nguyễntoàn Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

[…] BEM viết tắt cho Block Element Modifier – Công cụ sửa đổi phần tử khối. […]

toàn
Guest
toàn

Cho em hỏi e đọc ở trang https://en.bem.info/methodology/quick-start/ nó quy định Modifier là dấu “_” mà sao ở đây a nói là dấu “–“.
Có lý do gì hk ạ?

%d bloggers like this: