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

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

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

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

sass 示例：

.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

Answer 3

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

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

BEM - applying contextual styles to the block inside another block

css

sass