2

デザイナーが 2 つの色の組み合わせを持つプライマリ ボタンがあるデザインを思いついた状況があります。

BEM の原則に従って CSS を作成していますが、このボタンの修飾子に名前を付けるのは難しいと感じています。

現在、2 つの色の組み合わせの 1 つを持つ修飾子クラスが.button--primaryありますが、2 番目の色の組み合わせはプライマリ ボタンにも適用する必要があります。

通常、私は 2 つの異なる修飾子 (例: ) を作成するだけ.button--midnightです.button--mossが、現在、クラス.button--primary.

.button--primary代わりに を要素 (例: )に変更してから、button__primary先に例を示した 2 つの修飾子を追加する必要がありますか? または、代わりに
修飾子 (たとえば.button--primary--midnight、 ) に修飾子を付けて 2 つのクラスを作成する必要がありますか?.button--primary--moss

4

2 に答える 2

1

複数のクラス/修飾子を使用することを妨げるものは何もありません:

<element class="button button--primary button--midnight" />
と
<element class="button button--primary button--moss" />

しかし、これには欠点があります。

まず、HTML を乱雑にして、読みにくくします。次に、2 つの修飾子を使用すると、ソースの順序が重要にCSSなるため、この設定では常に最後のルールが優先されます。 

.button {
  color: black; }

.button--primary {
  color: green; }

.button--moss {
  color: yellow;
  font-weight: bold;  } 

.button--midnight {
  color: crimson;
  font-weight: bold;  }

これにより、この制約について覚えておく必要があり、それ自体がメンテナンスの問題を引き起こします。

したがって、複数の修飾子を使用しないという規則に固執することをお勧めします。そのため、あなたの場合は
<element class="button button--primary-midnight" />、と の間で共通の規則を共有するために <element class="button button--primary-moss" />
使用できます。 SASS @extendbutton--primarybutton--midnight

//SASS
.button--primary {
  color:white;
  //other rules
} 
.button--primary-midnight {
  @extend .button-primary;
  color:black;
}

これは次のようにコンパイルされます: 

/* CSS */
.button--primary,
.button--primary-midnight {
  color:white;
  /* other rules */
} 
.button--primary-midnight {
  color:black;
}
于 2015-10-19T13:11:49.680 に答える