Một đồng nghiệp của tôi đang thúc đẩy mạnh mẽ phương pháp BEM (Bộ điều chỉnh phần tử khối) cho CSS trong một dự án mà anh ấy đang hỗ trợ và tôi không thể hiểu điều gì làm nó tốt hơn CSS LESS mà chúng tôi đã viết trong nhiều năm.
BEM là một phương pháp CSS. Những người khác bao gồm OOCSS và SMACSS. Các phương pháp này được sử dụng để viết mã mô-đun, có thể mở rộng, có thể tái sử dụng, hoạt động tốt ở quy mô.
LESS là một bộ tiền xử lý CSS. Những người khác bao gồm Sass và bút stylus. Các bộ tiền xử lý này được sử dụng để chuyển đổi các nguồn tương ứng của chúng thành CSS mở rộng.
BEM và LESS không thể so sánh là "tốt hơn" so với nhau, chúng là những công cụ phục vụ các mục đích khác nhau. Bạn sẽ không nói rằng một cái tuốc nơ vít tốt hơn búa, trừ khi xem xét tiện ích để giải quyết một vấn đề cụ thể.
Ông tuyên bố "hiệu suất cao hơn" ...
Hiệu suất sẽ cần được đo giữa một kiểu CSS cổ điển:
.widget .header
và phong cách BEM của:
.widget__header
nhưng nói chung, hiệu suất của bộ chọn CSS không phải là nút cổ chai và không cần phải tối ưu hóa.
"Hiệu suất" của BEM thường liên quan đến mã viết hiệu suất của nhà phát triển. Nếu phương pháp BEM được sử dụng một cách nhất quán và chính xác, thì các nhóm nhà phát triển có thể đồng thời tạo ra các mô-đun riêng biệt mà không có xung đột kiểu.
Ông tuyên bố "dễ đọc" và "tái sử dụng" ...
Tôi không biết rằng tôi sẽ nói với một nhà phát triển mới rằng BEM dễ đọc hơn. Tôi có thể nói rằng nó cung cấp một số hướng dẫn được xác định rõ về ý nghĩa và cấu trúc của các lớp.
Nhìn thấy một lớp học như
.foo--bar__baz
Nói với tôi rằng có một fookhối ở bartrạng thái và chứa một bazphần tử.
Tôi hoàn toàn có thể nói rằng BEM có thể tái sử dụng nhiều hơn một mô hình cổ điển.
Nếu hai nhà phát triển tạo các khối ( foovà bar) và cả hai khối đó đều có tiêu đề, họ có thể sử dụng lại các khối của mình một cách an toàn trong các bối cảnh khác nhau mà không lo bị va chạm khi đặt tên.
Đó là bởi vì, trong một bối cảnh cổ điển, .foo .headingvà .bar .headingsẽ xung đột, và đưa ra một xung đột đặc thù cần được giải quyết, có thể trên cơ sở từng trường hợp cụ thể.
Trong một trang web BEM, các lớp sẽ .foo__headingvà .bar__headingkhông bao giờ xung đột.
Ông tuyên bố "CSS lồng nhau là một mô hình chống." "Chống mẫu" thậm chí có nghĩa là gì và tại sao CSS lồng nhau lại xấu?
"Chống mẫu" là một mẫu mã hóa mà các nhà phát triển thiếu kinh nghiệm có thể học và sử dụng dễ dàng hơn so với một giải pháp thay thế phù hợp hơn.
Theo như lý do tại sao CSS lồng nhau là xấu: Nesting làm tăng tính đặc hiệu của bộ chọn. Độ đặc hiệu càng cao, càng mất nhiều công sức để ghi đè. Các nhà phát triển thiếu kinh nghiệm thường lo lắng rằng CSS của họ có thể ảnh hưởng đến nhiều trang, vì vậy họ sử dụng các công cụ chọn như:
#something .lorem .ipsum .dolor ul.sit li.amet a.more
Khi một nhà phát triển có kinh nghiệm sẽ lo lắng rằng CSS của họ có thể không ảnh hưởng đến nhiều trang, vì vậy họ sử dụng các công cụ chọn như:
.more
Ông tuyên bố rằng "mọi người đều hướng tới việc sử dụng BEM, vì vậy chúng tôi cũng nên như vậy." ...
Đó là một ngụy biện bandwagon , vì vậy bỏ qua đó là một cuộc tranh luận xấu. Đừng rơi vào bẫy ngụy biện , bởi vì một lập luận xấu trong việc hỗ trợ BEM không phải là lý do để tin rằng BEM không thể tốt.
Ai đó có thể vui lòng giải thích chi tiết những gì làm cho BEM tốt hơn LESS không?
Tôi đã đề cập đến điều này trước đây, BEM & LESS không thể so sánh được. Táo và cam, v.v.
Đồng nghiệp của tôi hoàn toàn thất bại trong việc thuyết phục tôi, nhưng tôi không biết liệu tôi có lựa chọn nào khác ngoài việc làm theo không.
Tôi khuyên bạn nên xem OOCSS, SMACSS và BEM, và cân nhắc ưu và nhược điểm của từng phương pháp ... như một đội . Tôi sử dụng BEM vì tôi thích sự nghiêm ngặt của nó trong định dạng và không bận tâm đến các công cụ chọn xấu xí, nhưng tôi không thể nói cho bạn biết cái gì phù hợp với bạn hoặc cho nhóm của bạn. Đừng để một cá nhân thẳng thắn chạy chương trình. Nếu bạn không thoải mái với BEM, hãy lưu ý rằng có những lựa chọn thay thế khác có thể dễ dàng hơn cho nhóm của bạn để hỗ trợ. Bạn có thể cần bảo vệ vị trí của mình với đồng nghiệp, nhưng về lâu dài nó có thể sẽ có tác động tích cực đến kết quả của các dự án của bạn.
Tôi thực sự muốn đánh giá cao BEM hơn là chấp nhận một cách miễn cưỡng.
Tôi đã viết một câu trả lời trên StackOverflow mô tả cách BEM hoạt động . Điều quan trọng cần hiểu là bộ chọn lý tưởng của bạn nên có tính đặc hiệu 0-0-1-0để chúng dễ ghi đè và mở rộng.
Chọn sử dụng BEM không có nghĩa là bạn cần từ bỏ BÀI HỌC! Bạn vẫn có thể sử dụng các biến, bạn vẫn có thể sử dụng @imports và chắc chắn bạn có thể tiếp tục sử dụng lồng nhau. Sự khác biệt là bạn muốn đầu ra được kết xuất trở thành một lớp duy nhất, chứ không phải là một chuỗi con cháu.
Nơi bạn có thể đã có
.widget {
.heading {
...
}
}
Với BEM bạn có thể sử dụng:
.widget {
&__heading {
...
}
}
Ngoài ra, vì BEM xoay quanh các khối riêng lẻ, bạn có thể dễ dàng tách mã thành các tệp riêng biệt. widget.lesssẽ chứa các kiểu cho .widgetkhối, trong khi component.lesssẽ chứa các kiểu cho .componentkhối. Điều này giúp tìm nguồn dễ dàng hơn cho bất kỳ lớp cụ thể nào, mặc dù bạn vẫn có thể muốn sử dụng bản đồ nguồn.