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

【问题标题】：Block Element Modifier - Using BEM without the 'Element'?块元素修改器 - 使用没有“元素”的 BEM？
【发布时间】：2019-09-30 13:56:10
【问题描述】：

虽然我使用 CSS（和其他 CSS 预处理器）已经有一段时间了，但在关注 Block Element Modifier (BEM) convention 时我仍然没有完全自信。

假设我们遵循这种特定的 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 类充当菜单的“包装器”，类名仅包含 block 和 modifier。

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

【问题讨论】：

BEM 只是一个指南，您可以按照最适合您的程度进行操作

标签： html css bem

【解决方案1】：

当然可以，其实在documentation：

.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>

【讨论】：

感谢您澄清我的疑问，伙计！哦，我不知道上面的文档存在。感谢您的链接！它似乎比我一直关注的更简洁（en.bem.info/methodology/quick-start）

【解决方案2】：

根据文档 (http://getbem.com/naming/)，我们可以在块或元素上使用修饰符，但我们必须将此块或元素的类名保留在 html 中：

好：

<div class="block block--modifier">
      <div class="block__element block__element--some-modifier">...</div>
      ...
</div>

不好：

<div class="block--mod">...</div>
/* or */
<div class="block__element--mod">...</div>

【讨论】：