时间戳

首页 > 解决方案 > 块元素修改器 - 使用没有“元素”的 BEM？

html - 块元素修改器 - 使用没有“元素”的 BEM？

问题描述

虽然我使用 CSS（和其他 CSS 预处理器）已经有一段时间了，但在遵循块元素修饰符 (BEM) 约定时，我仍然没有完全自信。

假设我们遵循这种特定的 BEM 格式：

block-name__element-name_modifier-name_modifier-value

我可以知道指定一个没有 的类是否可以接受element-name？这意味着我们只有块，然后是修饰符。

这是一个例子：

<div class="menu_light-theme">
  <!-- the other menu elements such as the buttons and icons -->
  <ul class="menu__list_light-theme>
    <li><a class="menu__list-element" href="">Home</a></li>
    <li><a class="menu__list-element" href="">About</a></li>
  </ul>
</div>

从上面的代码块中可以看出，.menu_light-theme该类充当菜单的“包装器”，并且类名仅包含块和修饰符。

我理解这是主观的，但我想知道这是否符合 BEM，当然，当 BEM 的元素看起来“冗余”时，我愿意就如何处理这种情况提出建议。

标签： htmlcssbem

解决方案

当然可以，它实际上在文档中：

.button--state-success {...}

在您的示例中，我们可以这样做（不要忘记为修饰符添加两个破折号）：

<div class="menu--light-theme">
  <!-- the other menu elements such as the buttons and icons -->
  <ul class="menu__list--light-theme>
    <li><a class="menu__list-element" href="">Home</a></li>
    <li><a class="menu__list-element" href="">About</a></li>
  </ul>
</div>

推荐阅读