这是正确的 bem 命名吗？

【问题标题】：is this proper bem naming?这是正确的 bem 命名吗？
【发布时间】：2019-04-29 01:15:36
【问题描述】：

这是使用 bem 约定的正确命名吗？在元素中使用折叠

 <nav class="navigation">
      <div class="navigation__collapse">
          <div class="navigation__collapse-button"><i class="fa fa-bars"></i></div>
          <div class="navigation__collapse-menulist"></div>
      </div>
 </nav>

或者不在元素中使用折叠

<nav class="navigation">
      <div class="navigation__collapse">
          <div class="navigation__button"><i class="fa fa-bars"></i></div>
          <div class="navigation__menulist"></div>
      </div>
 </nav>

【问题讨论】：

这取决于：您是否愿意在导航元素中的其他地方使用另一个navigation__button？如果是这样，那么前一种语法可能会更好。或者您也可以使用后一个代码，但添加一个修饰符，例如class="navigation__button navigation__button--collapse"
命名约定不是基于意见的吗？

标签： css naming bem

【解决方案1】：

如果您打算仅在 __collapse 元素内使用 -button 和 -menulist 元素，最好在它们前面加上 collapse-，就像您的第一个示例一样。

另一个技巧可能是在navigation 组件内启动一个新块，称为“折叠”，如下所示：

<nav class="navigation">
    <div class="collapse">
        <div class="collapse__button"><i class="fa fa-bars"></i></div>
        <div class="collapse__menulist"></div>
    </div>
</nav>

这可能表明“折叠”组件有时可能会在“导航”之外使用。

对我来说，这始终取决于我想要强调的块之间的关系。

根据我的经验，很多人可能会像您的第二个示例那样这样做，仅仅是因为将来在“导航”下移动元素或将它们包装在另一个组件中可能会减少问题（不需要修改名称） .

PS：这里是a good read，和这个话题有关。

【讨论】：