Question

我对BEM有疑问。可以单独拥有.block__element并拥有block作为父母吗？我正在用WordPress构建一个站点，其中有许多其他主题，页面构建器和插件类，因此有时需要父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

我的看法是否，原因有两个：

对块进行了精心设计，并假定从block到block__element继承。我当然不能肯定地说没有看到任何代码，但是block__element的样式可能取决于从block继承一些规则。如果库设计人员不能假设所有block__element都有一个block祖先，那么以这种方式构造库没有任何好处。例如，如果block定义了display:flex，而block__element具有flex-grow:1，则在没有block父级的情况下，后者将无效。如果它是从其他祖先那里获得的display:flex，那么您实际上并不是在进行BEM。

Answer 2

我我认为您可以在很多情况下将BEM类与其他类混合使用。 BEM可以与其他方法，某些旧代码甚至是中等特定的类混合使用。

例如，我曾经混合使用方法：

您要对不基于逻辑的块进行特定更改。在这种情况下，与编写非逻辑的BEM修饰符（例如：.u-uppercase）相比，我更喜欢使用一种实用程序类（例如：.title--uppercase），该实用工具类的编写时间短并且可用于每个块。
您有一个布局类（用于分配屏幕空间），可以在多个块中重复。在这种情况下，我宁愿使用会降低BEM复杂度的OOCSS对象类（例如：.o-container），而不是在各处编写相同的BEM元素（例如：.header__container）。

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

根据我的经验，在构建此网站https://www.netalis.fr时，我尝试混合使用OOCSS（带有l-前缀）和BEM类（带有p-前缀）。起初很奇怪，但最终却非常有用且稳定。

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>

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

隔离，例如没有选择器将两者（.p-header > .l-container混合在一起
不可修改，实用程序/对象类不应随时间变化。

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

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

2 个答案: