問題タブ [bem]

既存のコードをリファクタリングして、BEM 命名規則を実装したいと考えています。

しかし、特にネストされた要素を使用して、コードを BEM の規則/要件に適合するマークアップに変換する際に困難に直面しています。

次の質問に対する答えを探しています。

1. BEM方法論でネストされた要素に名前を付ける適切な方法は何ですか?
2. 変更/ネストでスケーリングし、再利用可能にするには、要素にどのように名前を付ける必要がありますか?

既存のコード: (Fiddle: http://jsfiddle.net/karltynan/msavvhp9/ )

試みたコード: (フィドル: http://jsfiddle.net/karltynan/hd7r0n3a/ )

私は Sass 3.4.1 と BEM を使用しているので、scss は次のとおりです。

.photo-of-the-dayそして、タイトルで何かが起こるたびにホバーしたいのですが、これはかなり一般的であるため、通常はCSSで：

これは私が見つけた唯一の方法であり、ちょっと醜いように見えます

.photo-of-the-dayそのため、セレクターを継承してホバー内で使用して、完全なセレクターを再度コピーしないようにすることができるかどうか疑問に思っていました。

理想的には、次のようになります。

または、BEM の親セレクターへのカムバックに近いもの。出来ますか？

私のチームと私は、BEM っぽいものを実装し始めました (この記事を出発点として使用しました)。私がこれまでに読んだことは理にかなっているようです。私が頭を抱えている大きな問題の 1 つは、変更されたコンポーネントの子のスタイルを設定する方法です。

たとえば、.avatarコンポーネント.avatar--alternate/修飾子があるとします。おそらく、代替の背景は白ではなく黒です。代替の見出しのスタイルを設定するために使用する CSS セレクターとは何ですか?またその理由は?

ここにシナリオを配置しました：

私の腸は、これが見出しをスタイルする最も具体的な方法ではなく、最も「スケーラブル」または「将来性」があるように見えるので、私に B と言っています。一方、A は非常に説得力があります。なぜなら、私.avatar-subHeadingも同様の可能性を持っている可能性があり、場合によってはいくつかの段落があり、その場合、分類 (?) に苦しみ始める可能性があるからです (例<h1 class="avatar-heading avatar-heading--dark">)

Sass ライブラリに BEM モデルのようなものを実装したいと考えています。しかし、私はこれを行うためのきれいな方法を見つけるのに苦労しています。

たとえば、共通要素の「ベース」スタイルを宣言し、それを便利なバリエーションで拡張したいと思います。

ここでの問題は、生成され.container-featuredたクラスにボーダー プロパティしか含まれていないことです。Sass には、その「親」クラスのマージンと背景が含まれていません。

したがって、目的の結果を得るには、マークアップ内のクラスを 2 倍にする必要があります。

親クラスからそのモディファイア クラスにプロパティをプルして、マークアップでモディファイア クラスを参照するだけで同じ視覚的結果を得る方法はありますか?

これを行うためにミックスインを使用しようとしましたが、物事は非常に迅速に冗長になり、繰り返しになります。

Sassでこれを達成する簡単でクリーンな方法はありますか?

次のような BEM ツリーでグリッドを構築することを考えました。

• グリッド
• grid__行
• grid__列グループ
• grid__column

このティザーブロックのようなコンテンツもあります

• ティーザー
• teaser__thumbnail
• teaser__見出し
• teaser__body
• teaser__link

グリッドのさまざまな列にティーザー要素を表示したい場合は、次のマークアップにつながります。

私は BEM を使い始めたばかりですが、異なるブロックのスタイルが互いに影響を与えるため、これには欠陥があると感じています。

それは正しい扱い方ですか？より良い解決策の提案はありますか?