时间戳

首页 > 解决方案 > 这是正确的 bem 命名吗？

css - 这是正确的 bem 命名吗？

问题描述

这是使用 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>

标签： cssnamingbem

解决方案

如果您打算仅在元素内部使用-buttonand元素，那么在它们前面加上前缀可能是个好主意，就像您的第一个示例一样。-menulist__collapsecollapse-

另一个技巧可能是在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：这是一个很好的阅读，与这个主题相关。

推荐阅读