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

【问题标题】：BEM - applying contextual styles to the block inside another blockBEM - 将上下文样式应用于另一个块内的块
【发布时间】：2017-02-02 06:29:09
【问题描述】：

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

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

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

【问题讨论】：

.container .button 怎么样？，除非你有不止一个，那么单独的课程会很好......或者我误解了什么
想过，但它是 BEM 解决问题的方法吗？
嗯，不，他们建议您使用.button--modifier 提出问题...。查看此链接：getbem.com/naming
抱歉，找不到具体提到的位置。你介意澄清一下吗？
无法比他们已经在该链接中更好地解释它......老实说，实际上还没有深入研究它来尝试一下

标签： css sass bem

【解决方案1】：

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

【讨论】：

如果该特定样式不会在其他任何地方使用怎么办？
在这种情况下，按钮样式是特定于组件的，而 .container__button 可能更合适。
我认为.container__button 可能真的是个好主意。谢谢

【解决方案2】：

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

【讨论】：

【解决方案3】：

您建议的情况意味着 .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

【讨论】：

感谢您的回答，但我不确定根据容器的上下文更改按钮修饰符是个好主意。它引入了隐式行为，从而破坏了使用 BEM 的全部目的