Bem là gì

BEM là 1 trong quy ước đánh tên phổ biến cho những class CSS, được thực hiện công ty chúng tôi thực hiện rộng rãi tại Sparkbox. Các khái niệm cơ bạn dạng của BEM rất đơn giản và dễ dàng cùng dễ nắm bắt, nhưng mà bao hàm lỗi phổ cập cho những người bắt đầu biết BEM nội dung bài viết này xử lý các điều đó thông qua những ví dụ.

Bạn đang xem: Bem là gì

BEM (viết tắt của Block-Element-Modifier) là 1 trong những chuẩn chỉnh quy ước đặt tên đến class CSS. Nó đã được gật đầu đồng ý thoáng rộng và khôn cùng hữu ích trong câu hỏi viết CSS để dễ đọc, dễ nắm bắt, và quy mô.TẠI SAO LÀ BEMĐặt tên theo BEM hỗ trợ ba công dụng cụ thể:Nó truyền đạt mục tiêu hoặc công dụng.Nó truyền đạt cấu tạo component.Nó thiết lập cấu hình một nấc thấp tuyệt nhất của công dụng cho những mẫu mã selector. LÀM THẾ NÀO NÓ HOẠT ĐỘNGTên class BEM bao gồm cha thành phần:1. Block: Phần tử phụ vương phía bên ngoài cùng độc nhất của component được định nghĩa nhỏng một khối.2. Element: Bên vào của một component hoàn toàn có thể có không ít thành phần bé Call là những phần tử.3. Mỗi một Bloông xã hoặc Element rất có thể bao gồm một bộc lộ sự biến hóa do một sửa đổi.Nếu cả ba cùng được sử dụng trong một chiếc thương hiệu nó đang y hệt như cầm cố này:__--Sau lúc sẽ ra mắt nđính gọn gàng, hãy xem một số trong những ví dụ cụ thể.

Xem thêm: "Bông Hồng Lai" Mlee Sinh Năm Bao Nhiêu ? Tìm Hiểu Hotgirl Mlee Cao Bao Nhiêu

CÁC VÍ DỤ

Component không có Elements hoặcModifier

Các component cơ bản chỉ bao gồm một trong những phần tử tốt nhất và cho nên vì thế một class duy nhất đã là bloông chồng.

Component có chỉnh sửa

Một component có thể tất cả sự sửa thay đổi, sự sửa đổi đó buộc phải tiến hành với cùng một modifier class.  Không được sửa đổi class chủ yếu nó. Tăng thêm modifier class chứ không hề được sửa chữa thay thế class cơ bạn dạng.

Component cùng với các Elements

Các component tinh vi rộng sẽ có được những element nhỏ. Mỗi element bé rất cần phải tạo ra hình trạng nên gồm một tên class. trong số những mục đích phía sau áp dụng BEM là giữđến công dụng thấp tuyệt nhất với đồng hóa. Không làm lơ thương hiệu những class từ các thành phần nhỏ vào HTML của bạn. Điều đó buộc bạn đề xuất thực hiện các selector có tác dụng tăng đặc tính của các element bên phía trong component ( xem những bộ phận img cùng figcaption bên dưới đây). Các class rất có thể nđính gọn gàng rộng, nhưng lại sẽ làm tăng những nguy hại về sau. Một phương châm của BEM là chỉ thực hiện một tên class cho các selector. Look at me! Look at me! Nếu component của chúng ta bao gồm những element con những cấp, đừng cố gắng cần sử dụng thương hiệu class để đại diện thay mặt cho từng cấp cho. BEM không có mục tiêu biểu thị chiều sâu của kết cấu. Một thương hiệu class BEM đại diện mang đến một phần tử bé trong component này chỉ nên gồm 1 bloông chồng cơ phiên bản và tên một element. Trong ví dụ tiếp sau đây, chú ý rằng photo__caption__quote là một trong những phương pháp sử dụng ko chính xác của BEM, trong khi photo__quote thích hơp hơn. Look at me! Look at me!

Element có Modifier

Trong một trong những ngôi trường vừa lòng, các bạn chỉ mong mỏi đổi khác môt element vào một component. Trong ngôi trường đúng theo này chỉ việc thêm 1 modifier đối với element bắt buộc chuyển đổi của component kia. Tôi phân biệt rằng sửa thay đổi một element đã bổ ích hơn sửa thay đổi những component. Look at me! 

Ttuyệt đổi bên trên component cho những element bao gồm cùng hình dáng cơ bản

Nếu bạn muốn sửa đổi những element của component theo một format, kế tiếp bổ sung cập nhật những modifier của component cơ sở cùng kiểm soát và điều chỉnh mẫu mã cho từng element con một modifier. Vấn đề này làm tăng tính chính xác, tuy vậy sửa thay đổi component làm việc ngôi trường hợp này đơn giản dễ dàng rộng các. Look at me! Look at me! 

Tên có không ít từ

Tên theo BEM thực hiện nhì vết gạch bên dưới và hai dấu gạch ốp nối nuốm bởi riêng lẻ phong cách nhưBlock-Element-Modifier. Lý bởi là nhằm những lốt gạch nối đơn rất có thể sử dụng nlỗi những "vết cách". Các tên class buộc phải hiểu được, bởi vì vậy chữ viết tắt chưa phải thời gian nào thuộc quan trọng, trừ Khi chữ viết tắt có thể gọi được.
 

BEM SẼ KHIẾN BẠN HẠNH PHÚC

Lúc Này nếu bạn ko sử dụng BEM, tôi đang reviews nó vào dự án tiếp theo sau của người tiêu dùng. Nó rất có thể không giống so với phần lớn gì chúng ta đang áp dụng, nhưng tôi tin rằng bạn sẽ hối hả nhìn thấy đều tác dụng cơ mà nó sẽ cung cấp cho các dự án to cùng bé dại. Và hy vọng hồ hết ví dụ này để giúp bạn tránh khỏi một số trong những lỗi nhưng mà bọn họ thường gặp mặt khi lần thứ nhất sử dụng quy ước khắc tên này. Bài viết được dịch từ bỏ :https://seesparkbox.com/foundry/bem_by_exampleĐăng cam kết thực tập Web basic with HTML5, CSS3 & JavaScript tại man-city.net:https://goo.gl/cYzx53