BEM là gì ? Sử dụng BEM đặt tên class trong CSS WDI Blog

BEM là gì ? Sử dụng BEM đặt tên class trong CSS và HTML8 phút đọc

Trong hai bài viết trước bạn đã được học về khái niệm vùng chọn trong CSS và thứ tự ưu tiên trong CSS.Cả hai bài này đều hết sức quan trọng và là những kiến thức căn bản được sử dụng hàng ngày khi làm việc với CSS nên bạn hãy theo dõi ngay nếu chưa đọc nhé.

Khi bạn làm việc trong một dự án lớn với nhiều yếu tố HTML thì việc chỉ định class cho chúng sau đó gọi class này ra để thêm thuộc tính CSS là chuyện rất bình thường.Và mình dám chắc nhiều bạn sẽ gặp khó khăn trong việc đặt tên class cho các yếu tố HTML.

Bài viết hôm nay sẽ giới thiệu đến các bạn một phương pháp hay nói đúng hơn là một quy ước giúp chúng ta đặt tên class trong CSS và HTML.Quy ước đó có tên gọi là BEM.

Giờ chúng ta cùng tìm hiểu xem BEM là gì ? và cách sử dụng nó ra sao nhé.

BEM là gì ?

Như mình có nói ở trên BEM là một quy ước dùng để đặt tên cho các class trong HTML và CSS.BEM là viết tắt của 3 từ : Block, ElementModifier.

Khái niệm BEM chỉ ngắn gọn đơn giản như vậy thôi.Tiếp theo chúng ta sẽ tìm hiểu xem tại sao nên sử dụng BEM để đặt tên class trong CSS và HTML nhé.

Tại sao nên sử dụng BEM

Sử dụng BEM có ba lợi ích to lớn sau đây :

  • Dễ dàng bảo trì và nâng cấp code
  • Có thể tạo ra code chuẩn dù là dự án lớn
  • Nhiều người tham gia code một dự án dễ dàng

Dễ dàng bảo trì và nâng cấp code

Khi bạn sử dụng BEM để đặt tên cho class trong CSS và HTML thì bạn có thể viết ra những đoạn code CSS, HTML cực kì dễ hiểu và dễ dàng quản lý nâng cấp khi cần thiết.

Ngược lại nếu bạn không chú ý đến việc đặt tên trong CSS sẽ dẫn tới việc khai báo lung tung CSS khiến code trở nên phức tạp.Khi bạn muốn sửa chỗ CSS nào đó sẽ không rõ thứ tự ưu tiên của nó và nhiều trường hợp sẽ sử dụng tới Iimportant.

Việc này nếu tiếp diễn sẽ làm website không thể nâng cấp và trường hợp xấu sẽ làm hỏng giao diện hiển thị của website.Thời gian sửa chữa sẽ rất lâu mà công sức bỏ ra không phải ít.

Có thể tạo ra code chuẩn dù là dự án lớn

Nếu bạn chỉ code cho một trang web như Landing page thì sẽ rất đơn giản và có lẽ không cần dùng tới BEM.Nhưng khi dự án bạn làm số lượng trang web lên tới vài chục thậm chí vài trăm thì lại là một câu chuyện khác.

Số lượng trang web càng nhiều thì lượng code tái sử dụng sẽ càng lớn nếu không có phương án quản lý rõ ràng thì sẽ tạo ra một mớ hỗn độn code không ai hiểu ngoài bạn cả.Bạn vô tình sửa code chỗ này nhưng vô tình lại làm ảnh hưởng đến cả chỗ khác do chúng có liên quan tới nhau.

Khi sử dụng BEM bạn sẽ giới hạn được phạm vi code có tác dụng và biết rõ đoạn code CSS đó đang áp dụng cho đoạn yếu tố HTML nào.Bạn sẽ không gặp bất kì khó khăn nào dù đó là dự án lớn đi nữa.

Nhiều người tham gia code một dự án dễ dàng

Khi toàn bộ thành viên trong một team đều tuân theo một quy ước đặt tên class trong CSS và HTML thì có thể tạo ra code một cách thống nhất, đẹp và dễ quản lý.

Thường đi làm công ty chúng ta sẽ được phân cho làm một phần nào đó của dự án nên việc thống nhất thao tác giữa các thành viên trong team là rất quan trọng.

Sử dụng BEM đặt tên class trong CSS và HTML

Như mình đã giải thích ở trên BEM là viết tắt của 3 từ Block, ElementModifier.Quy ước đặt tên cho class trong CSS và HTML sử dụng BEM cũng dựa trên 3 từ này.

  • Block : yếu tố bao bọc bên ngoài toàn khối.Trường hợp áp dụng Block cho container hay section rất phổ biến trong thực tế.
  • Element : những yếu tố con nằm bên trong Block.
  • Modifier : là những thuộc tính / tính chất trang trí cho Block và Element.Ví dụ như trường hợp quản lý trạng thái giống như active hay large thì sẽ sử dụng Modifier.

Trong BEM quy tắc sử dụng Block、Element、Modifier để đặt tên class cho CSS sẽ như sau :

block__element–modifier

Ngay sau Block là hai dấu gạch dưới (_), tiếp theo sau là Element.Giữa ElementBlock với Modifier là hai dấu gạch ngang ().

Trường hợp sử dụng 1 từ mà không thể biểu hiện hết ý nghĩa của Block hay Element thì bạn có thể dùng một dấu gạch ngang để ngăn cách như sau : .main-block__title

BEM là gì ? Sử dụng BEM đặt tên class trong CSS

BEM là gì ? Sử dụng BEM đặt tên class trong CSS

Để thiết kế một phần trang web như trên đây sử dụng BEM thì trong tài liệu HTML mình đã đặt tên class cho các yếu tố HTML như sau.

HTML

Block lớn nhất bao bọc tất cả có class là .card sẽ tồn tại Element <p> đóng vai trò là title nên nó sẽ có class là .card__title.

Card với chiều rộng lớn nhất sẽ có class là .card–large, đây là sự kết hợp giữa BlockModifier.Khối Block ngoài cùng bao bọc bên ngoài có class là .card và do tính chất của nó là lớn nhất nên sẽ thành .card–large như bạn thấy.

Tiếp theo <button> cùng là yếu tố con nằm bên trong Block nên class của nó sẽ là .card__button.Mỗi card lại có màu sắc button khác nhau và màu sắc là tính chất nên chúng ta sẽ phải áp dụng Modifier.Lúc này mỗi button sẽ có thêm class dạng .card__button–color để chỉ định màu sắc.

CSS

Khi gọi các yếu tố HTML trong CSS thông qua class sử dụng BEM ta sẽ có kết quả như trên đây.Nhìn vào đoạn code này bạn sẽ hiểu ngay đoạn CSS này được áp dụng cho card và đâu là code CSS cho tiêu đề, đâu là code CSS cho nút bấm, nút bấm có màu sắc ra sao và vị trí của nó ở đâu…vv

Điểm bất lợi khi đặt tên class trong CSS và HTML sử dụng BEM đó là tên class sẽ dài ra và nếu không cẩn thận sẽ gây nhầm lẫn, khó hiểu.

Mẹo đặt tên class trong CSS khác

Khi cấu trúc HTML của bạn phức tạp và sử dụng BEM đặt tên class trong CSS / HTML không thể đáp ứng được nhu cầu thì bạn nên nghĩ tới những cách khác.Dưới đây là một số cách mình thường xuyên sử dụng.

Cách đầu tiên là thêm class bằng hai từ nối tiếp nhau.Từ đầu tiên viết thường và chữ cái đầu tiên của từ thứ hai sẽ viết hoa.Ví dụ như sau : class=”mainHead”.

Cách thứ hai là sử dụng một dấu gạch ngang (-).Khi kết hợp với BEM sẽ như sau : class=”box__title–red-1″.

Kết luận

Qua bài viết này bạn đã có câu trả lời BEM là gì ? Tại sao nên sử dụng BEM ? và Cách sử dụng BEM đặt tên class trong CSS và HTML.Hi vọng bạn hiểu những kiến thức mà mình chia sẻ trong bài viết này và áp dụng nó thành công.

Kết hợp các bài viết trước với bài viết này là bạn đã có đủ kiến thức nền vững chắc để thao tác với CSS rồi.Hi vọng bạn dành thời gian ra để luyện tập và hiểu kĩ hơn nữa, sau này áp dụng thành thạo những kiến thức này vào thực tế.

Hẹn gặp lại bạn trong các bài viết về CSS sắp tới.Chúc bạn thành công !

Bài viết trước :

Bài viết sau :

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x