灿元素包含块在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同样失去了会发现这个答案很有用...