9

有人告诉我，我写下面的代码是错误的。我想元素不能包含块及其坏bem

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

我最初编码的方式是错误的吗？如果是这样，为什么，最好的选择是什么。

4

3 回答 3

8

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

或者你可以使用这个（它使用 BEM 混合；我们用俄语讨论过这个）。这很有帮助，然后您需要从 javascript 代码中访问linkelem 。b-nav

<ul class="b-nav">

    <li class="b-nav__item">

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

     </li>

 </ul>
于 2013-07-17T07:30:59.547 回答
3

我认为将其命名为 nav_链接比 nav _item__link 更受欢迎，即使链接属于某个项目。也许我正在做的事情是为了展示这种等级制度而过分夸大。最后，两者属于同一个区块。

我在下面每个链接的评论中看到了一些示例

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

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

于 2013-04-09T17:38:48.900 回答
1

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

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

于 2015-10-13T01:15:46.330 回答