BEM 中的元素是否需要在块内？

Question

我有一个关于 BEM 的问题。单独使用 .block__element 和使用 block 作为 parent 可以吗？我正在使用 WordPress 构建一个网站，其中有很多来自主题、页面构建器和插件的其他类，因此有时需要 parent block有点乱。那么这样可以吗，单独使用 block__element 然后通过 SCSS 设置样式，还是我应该在页脚中添加 block 以正确执行此操作？

HTML

<footer id="footer">
 <div class="theme-class page-builder-class">
  <div class="footer-block__text">Some footer element text</div>
 </div>
</footer>

CSS

#footer .footer-block__text {
 color: #ffffff;
}

Answer 1

我的意见是否，原因有二：

BEM 旨在强制执行模块分离，以便更容易推理它们，并最大限度地降低样式从一个模块或块泄漏到另一个模块或块的风险。如果您将 BEM 块与非 BEM 代码混合在一起，那么您并不是真正在做 BEM。
块经过精心设计，并假定从 block 继承到 block__element。没有看到任何代码我当然不能肯定地说，但是 block__element 的样式可能取决于从 block 继承一些规则。如果库设计者不能假设所有 block__element 都有一个 block 祖先，那么以这种方式构建库就没有任何好处。例如，如果 block 定义了 display:flex，而 block__element 有 flex-grow:1，如果没有 block 父级，后者将无效。如果它从其他祖先那里得到 display:flex，那么你又不是真的在做 BEM。

Answer 2

我认为在很多情况下你可以将 BEM classes 与其他的混合使用。 BEM 可以与其他方法混合，与一些旧代码混合，甚至与特定于媒体的 classes.

例如，我曾经混合方法论：

您要对不基于逻辑的块进行特定更改。在这种情况下，我宁愿使用实用程序 class（例如：.u-uppercase），它的编写时间更短并且可用于每个块，而不是编写非逻辑 BEM 修饰符（例如：.title--uppercase)
您的布局 class（分布屏幕 space）在多个块中重复 。在这种情况下，我宁愿使用 OOCSS 对象 class（例如：.o-container）来降低 BEM 的复杂性，而不是在各处编写相同的 BEM 元素（例如：.header__container）。

您可以在此处找到有关扩展 BEM 的精彩演示：Modular CSS at Rangle。

根据我的经验，在构建此网站时，我尝试混合使用 OOCSS（带有 l- 前缀）和 BEM classes（带有 p- 前缀）https://www.netalis.fr。一开始很奇怪，但最后很好用和稳定。

来自 netalis 网站的示例：

<!-- HEADER BLOCK -->
<div class="p-header p-header--hero">

    <!-- NESTED BLOCK -->
    <div class="p-menu"></div>

    <!-- OBJECT CLASS -->
    <div class="l-container">

        <!-- HEADER ELEMENT -->
        <div class="p-header__content"></div>
    </div>
</div>

之所以有效，是因为这些外部 classes 是：

从 BEM classes 中分离出来，例如，没有混合两者的选择器 (.p-header > .l-container)
不可变，utilities/object classes 不应随时间改变。

所以我的问题是：你的 page-builder-class 是孤立且不可变的吗？

BEM 中的元素是否需要在块内？

Does an element in BEM need to be inside a block?

css

bem