燦元素包含塊在BEM

Question

有人告訴我，我錯了編寫代碼就像下面我有。我想元素不能包含塊和它的壞b.e.m.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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


    </li> 

</ul> 

我想過寫這樣說，但它並不顯示層次爲好。

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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


    </li> 

</ul> 

這是另一種方式，但對我來說，它似乎比上面的例子更糟糕。

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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


    </li> 

</ul> 

是我最初編寫它的方式錯了嗎？如果是這樣，爲什麼，什麼是最好的選擇。

Answer 1

我認爲它命名它nav_ 鏈接比nav _item__link更接受，即使鏈接屬於一個項目。也許我正在做的是矯枉過正以展示這種層次結構。最後，兩者都屬於同一個區塊。

我看到下面

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

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

Answer 2

您應該使用第二或第三個樣品中每一個環節的評論的一些例子。

或者你可以使用這個（它使用BEM混合;我們對這個在俄羅斯一個talk）。這是有用的，那麼你需要從javascript代碼訪問link elemen of b-nav。

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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

    </li> 

</ul> 

Answer 3

「BEM方法不推薦使用元素中的元素。」 - 就是這樣，沒有什麼比這更重要的了。

關於基本的命名結構，Smashing Mag有很大樹形象顯示這個應該怎麼做：

<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> 

這是在follwoing JSON格式很好的轉換：

{ 
    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: ... 
     } 
     } 
    ] 
    } 
} 

我個人建議使用你的第二個版本 - 在第三個關係/依賴之間的ul和一個標籤沒有在類命名中表示。 好吧，也許你已經在過去的2年解決了這個，但也許有人在正確的語法BEM同樣失去了會發現這個答案很有用...