Question

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

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

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

Answer 1

在这种情况下，如果按钮将被（重新）用于别处，在不同的部分中，那么我会说它的样式.button - 修饰符。检查原子设计模式（http://patternlab.io/），在这种情况下，按钮将是一个原子，容器可能是一个分子。我认为以.atom - 修饰符方式设置所有可重用原子的样式是一个好主意，但听听其他人的观点会很好

Answer 2

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

Answer 3

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

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

这也意味着如果你想在.container中有两个按钮样式，你可以根据.container上下文改变现有的.button - 修饰符，而不必为.button创建一个全新的 - 修饰符：）< / p>

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

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

3 个答案: