BEM CSS 继承？

Question

我在一个大型网站上工作。我们正在考虑以 BEM 风格编写 CSS，但不确定这是否真的是一个好习惯。 CSS 都是关于继承的，但我在 BEM 中看不到。例如：

.toolbar {
  &-btn {}  
}

VS

.toolbar {
  .btn {}
}

第二个例子中的.btn 可以继承全局.btn class，但是.toolbar-btn class 不会继承这些默认属性。所以你最终写了很多重复的属性。如果 BEM 不继承属性，为什么人们说它完全可以重用？编辑：我们尽量避免使用扩展功能。

Answer 1

如果您需要将 .btn 定义为全局 class，您应该将其用作修饰符（用于变体）


 .btn.btn--primary

 // OR
 .my-cool-btn.btn--primary.btn--red

这是 Google 新 "Material Design Lite" 框架的方法


 .mdl-layout__container  //Parent element

 --- .mdl-layout  //Block

 ------ .mdl-layout__header   //element

 ------ .mdl-layout__content  //element

以及 .mdl-layout__header 元素上的一些修饰符


// Local modifiers
.mdl-layout__header-row
.mdl-layout__header--scroll


// Global modifiers
.demo-header 
.is-casting-shadow
.mdl-color--grey-100
.mdl-color-text--grey-800

我强烈建议你看看他们的 repository and this template example

BEM CSS 继承？

BEM CSS Inheritance?

css

bem