元素可以在 bem 中包含块吗答案

【问题标题】：Can Elements contain Blocks in bem元素可以在 bem 中包含块吗
【发布时间】：2013-04-01 00:49:18
【问题描述】：

有人告诉我，我写下面这样的代码是错误的。我想元素不能包含块及其坏 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>

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

【问题讨论】：

前两个样本之间到底有什么区别？而且，你只是在问类名吗？
我看不出你所做的有什么不同或错误。
@EricHarms 问题在于大多数真实世界的网站都使用 BEM。通常最好利用核心 CSS 功能，例如子选择器。所以你的 HTML 实际上应该是这样的：<ul class="nav"><li><a href="#">Item</a></li></ul>，而你的 CSS 选择器应该是 UL.nav > LI、UL.nav A 或 UL.nav > LI > A。
@xec：在这里阅读了 BEM 的介绍后：coding.smashingmagazine.com/2012/04/16/… 我相信他确实在谈论他的类的命名约定。
你有什么问题？ <ul class="b-nav"><li class="b-nav__item"><a href="#" class="b-nav__link"> Item </a></li></ul>没关系！

标签： html css oocss bem

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

或者您可以使用这个（它使用 BEM 混合；我们有一个 talk 俄语）。这很有帮助，您需要从 javascript 代码访问 b-nav 的 link elem。

<ul class="b-nav">

    <li class="b-nav__item">

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

     </li>

 </ul>

【讨论】：

【解决方案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>

可以很好地转换为以下 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 语法中的人会发现这个答案很有用......

【讨论】：