BEM - 将上下文样式应用于另一个块内的块

Question

假设我们有.container和.button块：

<div class="container">
  <!-- some html -->
  <a class="button">A Marvelous button</a>
</div>

我们应该如何在.container的上下文中处理.button块的样式？我们还应该创建一个.button--modifier吗？

Answer 1

在这种情况下，如果按钮将在其他地方（重新）使用，在不同的部分中，那么我会说样式它.button--modifier。查看原子设计模式（http://patternlab.io/），在这种情况下，按钮将是一个原子，容器可能是一个分子。我认为以 .atom--modifier 方式设置所有可重用原子的样式是个好主意，但最好听听其他人对此的看法

Answer 2

您可以使用混音来解决您的问题。

Answer 3

您建议的情况意味着 .container 是基本 .button 块的修饰符。

在 .containers 上下文之外工作的现有 --修饰符在 .container 上下文中仍然相关。

这也意味着如果你想在 .container 中有两个按钮样式，你可以根据 .container 上下文更改现有的 .button--modifier，而不必为 .button :) 创建一个全新的 --modifier

屁股示例：

.button { 
  color: red;
  &--modifier {
    color:yellow // works everywhere including inside .container
  }
  .container & {
    color: green;
    &--modifier {
       color:blue; // just applied inside .container
    }
  }
}

将输出：

.button {
  color: red;
}
.button--modifier {
  color: yellow;
}
.container .button {
  color: green;
}
.container .button--modifier {
  color: blue;
}

如图所示 http://www.sassmeister.com/gist/9c909d0071bdac75dc1b73be86443e2c