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

您应该使用第二个或第三个样本。

或者你可以使用这个（它使用BEM混音;我们在俄语中有talk）。这有助于您从javascript代码访问link b-nav元素。

<ul class="b-nav">

    <li class="b-nav__item">

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

     </li>

 </ul>

Answer 2

我认为命名为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 3

＆＃34; BEM方法不推荐使用元素内的元素。＆＃34; - 那就是它，仅此而已。

关于基本的命名结构，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>

使用以下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和a标签之间的关系/依赖关系没有在类命名中表示。好吧，可能你在过去的两年里已经解决了这个问题，但也许有人在正确的BEM语法中失败了会发现这个答案很有用......

元素可以包含bem中的块

3 个答案: