BEM Methology：異なる質問（リセット、ミックスまたは修飾子）

Question

:)

リセットクラス：

のは、私が_base.scssを持っていると何がある

ul { 
    margin-top: 20px; 
    margin-bottom: 10px; 
} 

があるとしましょう常に同じものをリセットするBEMの最良の方法。私はグローバルクラスは「許可されていない」と読んでいます。 scssプレースホルダ（％resetUl）を実行してul-listを拡張するか、ここで許可されている何らかのグローバルクラスですか？例。

<ul class="resetUl"> 
    <li class="resetLi"> 
</ul> 

BEMミックスまたは修飾子： 私は2つの類似のボタンがあります。 1つのボタンは16px、もう1つは20pxのフォントサイズです。小さなもの（16pxフォントサイズ）は、常に他のコンポーネント内にあります。ここでミックスやモディファイアをしなければならないのですか？

ミックス：

修飾子：どういうわけか、デザイナーが、私は別の部分でも、そのボタンをしたい」と言うならば... hmm..letのは、インクルードEHMM ...何と言う

<div class="header"> 
    <a class="btn btn--small"></a> 
</div> 

ミックスとフッター」...

：

.header__item, 
.footer__item { 
     font-size: 16px; 
} 

修飾子で

：

.btn { 
    //button stuff 
} 

.btn--small { 
    font-size: 16px; 
} 

私はこれを書いている間、フォントサイズのようなもの、または色が余裕のような修飾子とスタッフがミックスされているようですか？

この場合、スペース（マージン）に関する質問： コンポーネントまたはBEM-Mixに余白がありますか？単純なボタンをもう一度言いましょう。私はそれがすべて可能だと知っているが、いくつかの長所と短所をキャッチしようとしている。

感謝:)

Answer 1

1）あなたは、いくつかのプロパティをリセットするためのいくつかのプレースホルダを作成することができます。例えば、%reset-list,%reset-button。そのコンポーネントでコンポーネントを拡張します。 .button { @extent %reset-button; }。

2）改質剤または混合物。 余白や配置などのすべての外部スタイルは、親ミックスで設定する必要があります。しかし、色、フォントサイズなどのすべての内部プロパティは、修飾子で設定する必要があります。なぜなら、要素は外部の文脈について知らないからです。そして親のブロックも、その子どもたち（__elementではない）の作り方を知らない。あなたのケースでは

：

<div class="header"> 
    <a class="header__item btn btn--small"></div> 
</div> 

.header__item { 
    position: absolute; // for example 
} 

.btn--small { 
    font-size: 16px; 
}