BEM - 別のブロック内のブロックにコンテキストスタイルを適用

Question

我々は.containerと.buttonブロックがあるとします。

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

我々は.containerのコンテキストでのみ.buttonブロックのスタイリングに近づく必要がありますどのように？まだ.button--modifierを作成する必要がありますか？

Answer 1

この場合、ボタンが別のセクション内で別の場所で使用される場合は、スタイルit .button - modifierと言います。アトミックデザインパターン（http://patternlab.io/）をチェックしてください。この場合、ボタンは原子になり、コンテナはおそらく分子になります。再利用可能なすべてのアトムを.atom修飾子でスタイルするのは良い考えだと思うが、これについて他の人の意見を聞くのが良いだろう。

Answer 2

.containerは基本の修飾語であることを意味する。ボタンブロック。

.containersコンテキストの外で動作する既存の - 修飾子は、.containerコンテキスト内では依然として関連しています。

これはまた、.containerコンテキストに基づいて既存の.button-modifierを変更することができる.containerの内部に2つのボタンスタイルがあることを意味します。

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を使用して問題を解決することができます。