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

假设我们有

.container

和

.button

块：

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

奇妙的纽扣

---

我们应该如何专门在

.container

的上下文中设置

.button

块的样式？我们是否仍然应该创建一个

.button--modifier

？

在这种情况下，如果按钮将在其他地方（不同的部分中）使用，那么我会说它是样式.button--modifier。查看原子设计模式（），在本例中，按钮是一个原子，容器很可能是一个分子。我认为以.atom--modifier的方式为所有可重用原子设置样式是个好主意，但最好听听其他人对此的看法。您所建议的情况意味着.container是basic.button block的修饰符

在.containers上下文之外工作的现有--modifier在.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;
}

---

如图所示，

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

如何使用

.container.button

。。。或者我误解了这方面的任何想法，但这是BEM解决问题的方法吗？不，他们用一个

.button--modifier

。。。。检查此链接：抱歉，找不到它的确切位置。你介意澄清一下吗？不能比他们在链接中已经做的更好解释了。。。老实说，我还没有深入到这一点来尝试一下，如果这个特定的样式在其他地方不会被使用，那该怎么办呢？在这种情况下，按钮样式是特定于组件的，而.container\uu按钮可能更合适。我认为

.container\uu按钮

可能真的是个好主意。谢谢你的回答，但是我不确定，根据容器的上下文更改按钮修饰符是否是个好主意。它引入了隐式行为，这反过来又破坏了使用边界元法的整体目的