Lời giới thiệu.
Ngày nay, HTML, CSS và JS đã là ba thứ quá quen thuộc với những người hoạt động trong lĩnh vực lập trình web.
Nếu như JS cần khá nhiều thời gian để thành thạo, cũng như công việc gỡ rối của nó thì đôi khi là càng gỡ, càng rối. Thôi thì đập đi, code lại còn nhanh hơn. Thì HTML và CSS lại khác hẳn, vì bạn có thể chỉnh sửa ngay trên trình duyệt và thấy được ngay kết quả.
Tôi thường ví cái việc gỡ rối này cũng giống như nêm nếm nước chấm cho món nem rán vậy. Thấy chưa được, thì cứ thêm chút mắm, chút đường, chút giấm, … thêm và nếm là thấy khác ngay.
Nhưng mà cái sự đời, cái gì càng dễ thì để giỏi càng khó. Hơn nữa, dễ làm thì dễ lỗi. Do mỗi người viết một kiểu, một dự án mà có 3,4 người cùng làm thì kiểu gì cũng có chuyện người này sút vào mông người kia.
Mọi chuyện sẽ khác khi ta áp dụng B.E.M, một quy tắc về đặt tên class cho các thẻ HTML.
B.E.M là gì?
-
B.E.M là viết tắt của ba từ “Block”, “Element” và “Modifier”. Cụ thể thì như sau:
Block: là những đối tượng tồn tại một cách độc lập. Ví dụ: header, container, menu, checkbox, input
Element: là một phần của khối (block), nó thường không tồn tại độc lập được. Ví dụ: menu item, list item, checkbox caption, header title
Modifier: là các trạng thái (hoặc hình thái) của block, hay các tính chất của đối tượng. Ví dụ: disabled, highlighted, checked, fixed, size big, color yellow.
- Về mặt ngôn ngữ, Block và Element thường là danh từ, còn Modifier thường là tính từ hoặc trạng từ.
- Về mặt tư duy lập trình thì có thể hiểu Block là các lớp “Class”. Element là các thuộc tính “property” của lớp. Modifier thì các class con.
B.E.M là gì?
Lan man như thế có lẽ đã đủ nhiều, giờ là lúc ta đi vào nội dung chính. Viết CSS theo BEM là viết như thế nào.
Tên của B, E, M phải là chữ cái thường, tất cả lowercase. Tên nếu là từ đơn thì các từ nối với nhau bằng một ký tự gạch dưới “_”, hoặc một ký tự gạch ngang “-”.
Thứ tự đặt tên là: block- -modifier_ _element.
Block liên kết vs modifier bằng hai dấu gạch ngang.
Modifier liên kết với element bằng hai dấu gạch dưới.
Hạn chế tối thiểu việc viết CSS lồng nhau.
Ví dụ: Dự án có dùng BEM.
dev X
dev Y
Ví dụ: Dự án không dùng BEM.
dev X
dev Y
Nhìn nhanh ta có thể thấy được, ở dự án NoBEM, đã có sự xung đột giữa thuộc tính của hai class “photoImg”, và “photoCaption”.
Lời kết.
Cảm ơn các bạn đã đọc đến những dòng cuối này. Thời điểm tôi viết bài viết này, thì BEM đã không còn là một thứ mới mẻ vừa ra mắt nữa, nên có rất nhiều bài viết hướng dẫn về nó.
Vì thế, bài viết mang tính chất giới thiệu BEM dưới góc nhìn cá nhân. Còn cách sử dụng BEM chi tiết, nhanh chóng, và hiệu quả, tôi sẽ viết trong những phần tiếp theo của loạt bài này.
