問題タブ [bem]

いくつかのスタイリングと、BEM modifierとして機能する追加のクラス ( mywidget_button--disabled ) を持つ要素が与えられた場合、練習として!important句を使用する意味はありますか?

最初のクラスはより具体的で、2 番目のクラスに勝ちますが、(理論的には) 「一般的な」スタイリングよりも優先度が高い修飾子を無効にするクラスであるため、!important句に依存するのは正しいですか?

それとも、コードが頭の痛い問題になりやすいのでしょうか?

シンプルなボックスを定義するために、次の BEM スタイルの Css があります。

また、ボックスをエラー モードで表示できるようにする必要があるため、次の修飾子を定義しました。

私が抱えている問題は、ボックスがエラー モードのときに box__heading などのネストされた要素のスタイルを定義する良い方法を見つけることです。

親だけでなく見出しにも修飾子を定義しますか?

または、CSSでこれを行うだけですか:

BEM 命名規則を使用しようとしていますが、特定のページの修飾子をどこに含めるかを決定するのに少し苦労しています。

たとえば、オレンジ色のボタンがあるとします。

私のプロジェクトには 3 つの異なるページがあります。

ボタンpageB.htmlにはmargin-top:30px. このように修飾子を書くのは正しいですか：

そして、特定のページだけにそのような修飾子を含める最良の方法は何ですか? この場合、それはpageB.html. その修飾子を or 内に含める必要がありますpageB.scssか.buttons.scss?

デザイナーが 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

sass は、これを可能にする @extend メソッドを提供してくれることを知っています。

ただし、抽象クラスをまったく定義したくないのですが、修飾子内から (この場合は幅と高さ) で定義%knobされたプロパティを参照/含めることは可能でしょうか?__knob--red--blue

少し手助けするために、ここにsassmeisterスニペットを含めます：http://sassmeister.com/gist/58b5b4673a18ecadbba7

ここの例は問題のように見えないかもしれませんが、長いクラス名を持つ要素に2つ以上の異なる修飾子グループがあり、抽象クラスを作成しない場合、私は時々、<p class="some other classes some-house__some-door__some-knob some-house__some-door__some-knob--red">example</p>あまり望ましくないと思うこのようなhtmlタグで終わることがあります.

私が達成したいこと:

<p class="some other classes some-house__some-door__some-knob--red"></p>親要素を参照すると、抽象%knobクラスを宣言する必要なく、この文字列をに減らすことができます

ここで抽象クラスを使用することをためらうのはなぜですか。

__door要素内で抽象クラスを宣言すると( http://sassmeister.com/gist/bc49e0885342e96a8fbd )、次の結果が得られます。

希望の代わりに

使用されるスコープ外の抽象クラスを宣言すると、コードが読みにくくなります

または、コードをより読みやすく/保守しやすくするために使用できる別のアプローチがありますか?

BEM 命名規則を使用する場合、表示クラスと非表示クラスの名前の一部としてブロックを含める必要がありますか?

div.block-class があり、それを非表示にしたい場合、それは div.block-class.hide または div.block-class.block-class--hide である必要がありますか?

BEM 手法を使用して CSS を作成する人向け。私は BEM を学ぼうとしていて、簡単な例から始めています。私はこれを持っています:

HTML

CSS

ご覧のとおり、これは単純な水平ナビゲーション メニューのはずですが、垂直にしたいのです。BEMによると（私が理解している限り）、Modifier、この場合は のようなものを使用し.menu_vertical、スタイルを追加して垂直にする必要があります。つまり、ネストされたを使用しないとそれを行う方法が見つかりませんセレクター (この方法論では推奨されていません) があり、いくつかの競合が発生しています。ここで何をすべきですか?