私はCSSを書いているときにBEM方法論を使い始めましたが、特定のことを行うための最良の方法を見つけるのに苦労することはほとんどありませんでした。

ここでは、パネルの簡単な例を取り上げたいと思います。

BEMスタイルを使用してパネルコンポーネントCSSを作成しているとしましょう。したがって、私のCSSは次のようになります。

パネルは、クロムレスまたはクロムありのいずれかです。そこで、パネルに別の修飾子クラスを定義します。

たとえば、パネルをフルスクリーン/最大化した状態にして、クロームとタイトルバーが消えることもできます。パネルとタイトルバーの両方に修飾子を定義する代わりに、親（たとえば、パネル-フルスクリーン）で修飾子を定義するのが賢明であり、残りの要素はそれに応じて変更されます。だから今私のCSSは次のようになります：

フルスクリーンモードでクロームを削除するには、次のいずれかを実行できます。

1. パネルを切り替える-パネルと一緒にJSのChromeクラス-フルスクリーンクラス

2. パネル内のクロムCSSを上書きします--fullscreenクラス。

理想的には、JSの1つのクラス（ .panel--fullscreen）だけを切り替えてフルスクリーンモードを切り替えたいので、最初は良くありません。

そして、2番目のものは悪い習慣です。以前のCSSを上書きする必要があるからです。

それで、それについて行くための最良の方法は何ですか？あなたのコメントに感謝します。

ありがとう

たとえば、メニュー要素を含むメニュー ブロックがあります。

しかし、.menuブロックが別のブロックの中に含まれているとしましょう。.header

この場合、ネーミングをどのように処理しますか?

また

また

以下のようなコードを書くのは間違っていると言われました。要素にブロックとその悪いビームを含めることはできないと思います

このように書こうと思ったのですが、階層も表示されません。

これは別の方法ですが、私には上記の例よりも悪いようです。

私が最初にコーディングした方法は間違っていますか？もしそうなら、その理由と、最良の代替手段は何ですか。

質問する前に、私が参照しているコードは次のとおりです。

ボックス オブジェクト

Bootstrap で Island や Islet などのコンテンツをボックス化するために使用されます。

ラウンドスキン

角を丸くします。ボックスなどのいくつかの抽象化クラスで使用されます。

抽象化をスキン化するコードでは、次のように記述します。

グレー、アラート、ラベルなど、ボックスを拡張する他のスキンがあります。

それでは質問です

私はボタンオブジェクトに取り組んでいます。しかし、ボックスと同じルールと修飾子があり、ラウンドの同じ修飾子を持つことができるので、スキンとして宣言するだけでよいでしょうか? すべてのボタンは、「外観」について約 4 つのルールを追加するだけです。余白やパディングを台無しにする場合は、オブジェクトにする必要があります。

あなたが書くコードで

または、サイズを小さくする

それをドライに保つのはやり過ぎですか？私が心配しているのは、ボタンがページ上で非常に一般的な要素であることですが、実際には、オブジェクトと既に記述した修飾子を拡張しているだけです。

BEM でヘッダー ブロックを定義する必要があるとします。ヘッダーにはいくらかのインデント (パディング、マージン) が必要ですが、レイアウトはコンポーネントから分離したままにする必要があるという一般的な理解もあります。

問題は、ヘッダー ブロックの CSS の一部としてインデントを指定する必要があるか、それとも周囲のブロック (レイアウト ブロックまたはグリッド) によってのみ指定する必要があるかということです。どちらのアプローチにも、短所と長所があります。

asp.net mvc と bem ( http://bem.info/ ) の統合に直面する人はいますか? 例やチュートリアルへのリンクを紹介できますか?

たとえば、次のようなスタンドアロン ブロックがあります。

このブロックはたまたまヘッダーに存在しますが、どこにでもある可能性があります。現在、ヘッダーにある場合は、左にフロートし、境界線も付ける必要があります。もしそうなら、これはそれを行う正しい方法ですか：

またはBEMに従って：

2つのうちどちらが優れていますか？

私は、CSS をよりモジュール化するために職場のプロジェクトで BEM を使用してきましたが、少し説明が必要だと感じるいくつかの状況に遭遇しました。

コンテキスト依存のスタイル。親アイテムのクラスに依存するモジュール/コンポーネントのスタイルを変更する必要性に遭遇し続けています。

私が製品リストをスタイルしているとしましょう。私は自分の.product-listコンポーネントを持っており、その中にすべての私.product-list__itemのものがあります。の.product-list__item場合<h3>、製品タイトルとして内側が含まれる場合があります。

私の質問は次のとおりです。

• .product-list__itemのクラスも必要.itemですか?

• 商品内のタイトルには次のクラスが必要です。

• • .item__title?
• • .product-list__item__title?

アイテムには説明ボックスもあり、価格が含まれているとします。

• 説明には次のものが必要です。
• • .item__description?
• • .product-list__item__description?

• 価格には次のものが必要です。

• • .item__description__price?
• • .description__price?
• • .price?

サブコンポーネントには、独自のコンポーネント名を別途追加する必要があります。つまり.item、または.description. 他にどこでスタイリングを適用するので、彼らはそれらを必要としていると思いますか?

また、上記の.product-listコンポーネントがあれば、問題ないように聞こえるコンポーネントがありますが、サブコンポーネントに独自のコンポーネント名がクラスとして追加されている.item場合、それ自体はあまり説明的ではありませんか?

複雑に聞こえるかもしれませんが、私はここで混乱することを真剣に考えており、あなたの意見を聞きたいと思っています. 私は BEM に関する記事をたくさん読んできましたが、この種のことを説明している人はいません。

ニール