可以将多个 BEM 元素应用于 html 元素的类吗？

Posted 2023-02-23

【中文标题】可以将多个 BEM 元素应用于 html 元素的类吗？

【英文标题】：Is it OK to apply multiple BEM elements to an html element's class?

【发布时间】：2018-04-14 21:23:07

【问题描述】：

我正在根据BEM convention 在我的 Web 应用程序中构建 CSS。

我有一个名为 item 的块和 3 个元素：item__section、item__title 和 item__description。

我使用这些 BEM 类如下：

<div class="item">
  <div class="item__section item__title"> ... </div>
  <div class="item__section item__description"> ... </div>
</div>

item__section 元素类包含我们在元素之间重用的样式。

这是有效的 BEM 还是我应该为每种部分（标题和描述）创建 item__section 的修饰符？

【参考方案1】：

这是绝对有效的，称为mix：

https://en.bem.info/methodology/key-concepts/#mix https://en.bem.info/methodology/css/#mixes

【讨论】：

上面的代码不是混合的，你不应该在同一个标​​签中使用同一个块的两个元素

【参考方案2】：

我认为你不应该这样做。 你可以像这样添加 mixin：

<div class="item">
  <div class="item__section u-title"> ... </div>
  <div class="item__section u-description"> ... </div>
</div>

但不要在同一个标​​签中使用同一个块的两个元素，因为你可能会遇到特异性问题