
CSS với quy tắc đặt tên BEM: Sơ lược
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.
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.
Created by
Alex Kalh
Sự tiến bộ của công nghệ là vô hạn. Đổi thay diễn ra hàng ngày, hàng giờ. "Đó là niềm hạnh phúc, cũng là bi ai của một lập trình viên!"
HTML: Margin, Padding – When & Why
01/ Trong project, phần UI (HTML, CSS) sẽ có rất nhiều block dùng chung (common). Đừng dùng margin cho block đó. Vì block đó ở các trang khác nhau, hoặc
March 17, 2023
CSS với quy tắc đặt tên BEM: Mở rộng với các từ chỉ trạng thái
Khi khai báo các class theo BEM, có thể sử dụng một số tiền tố như sau: is- Cần mô tả trạng thái của element: is-active, is-pending, etc.. has- Cần
March 5, 2023
CSS với quy tắc đặt tên BEM: Kết hợp với SASS
Sass Mixins Có một vấn đề với BEM, đó là khi viết CSS sẽ khá dài dòng, nhưng khi kết hợp với các Sass Mixins này, mọi chuyện lại rất
March 4, 2023