Các phần tử có thể chứa các khối trong bem

Question

Tôi đã được thông báo rằng tôi đã sai khi viết mã như tôi có dưới đây. Tôi cho rằng các phần tử không thể chứa các khối và b.e.m.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

     <a href="#" class="b-nav__item__link"> Item </a> 


    </li> 

</ul> 

Tôi đã nghĩ về cách viết theo cách này nhưng cũng không hiển thị thứ bậc.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

     <a href="#" class="b-nav__link"> Item </a> 


    </li> 

</ul> 

Đây là một cách khác nhưng với tôi, điều đó có vẻ tệ hơn ví dụ trên.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

     <a href="#" class="b-link"> Item </a> 


    </li> 

</ul> 

Cách tôi viết mã sai? Nếu vậy tại sao, và thay thế tốt nhất là gì.

Answer 1

Tôi nghĩ rằng đặt tên cho nó nav_ liên kết được chấp nhận nhiều hơn nav _item__link, ngay cả khi liên kết thuộc về một mục. Có lẽ những gì tôi đã làm là quá mức cần thiết để hiển thị thứ bậc đó. Cuối cùng, cả hai đều thuộc cùng một khối.

tôi thấy một số ví dụ trong các ý kiến ​​của mỗi liên kết bên dưới

https://github.com/csswizardry/inuit.css/issues/155

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Answer 2

Bạn nên sử dụng mẫu thứ hai hoặc thứ ba.

Hoặc bạn có thể sử dụng cái này (nó sử dụng hỗn hợp BEM; chúng tôi có talk về điều này bằng tiếng Nga). Điều này hữu ích khi bạn cần truy cập link elem của b-nav từ mã javascript.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

     <a href="#" class="b-nav__link b-link"> Item </a> 

    </li> 

</ul> 

Answer 3

"Không nên sử dụng các phần tử trong phần tử theo phương pháp BEM". - đó là nó, không có gì hơn, không có gì ít hơn.

Liên quan đến cấu trúc đặt tên cơ bản, Smashing Mag có một con số cây lớn hiển thị như thế nào này nên được thực hiện:

<b:page> 
    <b:head> 
    <b:menu> 
     ... 
    </b:menu> 
    <e:column> 
     <b:logo/> 
    </e:column> 
    <e:column> 
     <b:search> 
     <e:input/> 
     <e:button>Search</e:button> 
     </b:search> 
    </e:column> 
    <e:column> 
     <b:auth> 
     ... 
     </b:auth> 
    <e:column> 
    </b:head> 
</b:page> 

Đó là độc đáo năng biến trong các định dạng JSON follwoing:

{ 
    block: 'page', 
    content: { 
    block: 'head', 
    content: [ 
     { block: 'menu', content: ... }, 
     { 
     elem: 'column', 
     content: { block: 'logo' } 
     }, 
     { 
     elem: 'column', 
     content: [ 
      { 
      block: 'search', 
      content: [ 
       { elem: 'input' }, 
       { 
       elem: 'button', 
       content: 'Search' 
       } 
      ] 
      } 
     ] 
     }, 
     { 
     elem: 'column', 
     content: { 
      block: 'auth', 
      content: ... 
     } 
     } 
    ] 
    } 
} 

Cá nhân tôi sẽ khuyên bạn nên sử dụng phiên bản thứ hai của bạn - trong mối quan hệ thứ ba/phụ thuộc giữa ul và một thẻ không được đại diện trong việc đặt tên lớp. Vâng, có thể bạn đã giải quyết vấn đề này trong 2 năm qua, nhưng có thể một người nào đó bị mất tương tự trong cú pháp BEM phù hợp sẽ thấy câu trả lời này hữu ích ...