Question

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

Answer 1

如果仅在-button元素内使用-menulist和__collapse元素，则最好在它们前面加上collapse-，例如第一个例子。

另一种技巧可能是在navigation组件内启动一个新的Block，就像下面这样叫做“ collapse”：

<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，与该主题相关。

这是正确的bem命名吗？

1 个答案: