Đặt tên cho một lớp phần tử bao bọc Khi sử dụng BEM

Question

Tôi hiểu rằng khi sử dụng BEM, tên lớp không được phản ánh trực tiếp cấu trúc HTML, nhưng phải đặt tên phần tử bao bọc như thế nào? Vui lòng bỏ qua cú pháp cụ thể của tôi (gần SUIT); nó vẫn theo BEM, chỉ với một cách phân biệt các yếu tố khác nhau.

Ví dụ:

<div class="?"> 
    <footer class="PageFooter"> 
    <h4 class="PageFooter-brand>…</h4> 
    <ul class="PageFooter-contactDetails">…</ul> 
    </footer> 
<div> 

tôi sẽ hiện lớp wrapper trong trường hợp này như PageFooterWrapper, nhưng điều này cảm thấy phiền phức vì wrapper là không độc lập - nó tồn tại hoàn toàn cho PageFooter. Rõ ràng là tiền tố tất cả mọi thứ với PageFooter- là vô lý, do đó, chỉ lá điều trị wrapper như là một phần của PageFooter: PageFooter-wrapper. Điều này làm tôi khó chịu vì có một gợi ý ngụ ý được áp dụng bởi điều này.

Vậy lớp trình bao bọc phải là gì?

Answer 1

Cách tôi đã luôn coi đó là wrapper nên luôn luôn có khối như vậy:

<div class="PageFooter"> 
    <footer class="PageFooter-inner"> 
    <h4 class="PageFooter-brand">...</h4> 
    <ul class="PageFooter-contactDetails">...</ul> 
    </footer> 
</div> 

Các B khóa chứa E lements nên thay vì có một cái gì đó xung quanh tôi B khóa i chỉ theo sau với nguyên tắc lement E lement và bắt đầu sử dụng inner thay vì các thùng chứa

Answer 2

Tôi đã ctually sử dụng hai lớp thành công, mô hình của tôi là như sau:

<div class='page-section bem-block'> 
    <div class='bem-block__element'> 
     <!-- etc etc --> 
    </div> 
</div> 

hiệu quả sử dụng một utility class để thực hiện chức năng wrapper nhất định. Các css có thể sẽ tương tự như thế này:

.page-section { 
    width: 100%; 
} 
@media screen and (min-width: 1200px) { 
    margin: 0 auto; 
    width: 1200px; 
} 

Tôi đã tìm thấy điều này hoạt động tốt trong thực tế. Nó cũng sẽ có thể cho .bem-block và nó đương thời kế thừa từ .page-section.

Giải pháp này bổ sung cho Dan Gamble.