問題タブ [bem]

私は大規模なウェブサイトに取り組んでいます。CSS を BEM スタイルで記述することを検討していますが、これが実際に良い方法であるかどうかはわかりません。CSS はすべて継承に関するものですが、BEM ではそれが見られません。例えば：

VS

2 番目の例の .btn はグローバル .btn クラスから継承できますが、.toolbar-btn クラスはこれらのデフォルト プロパティを継承しません。そのため、多くの繰り返しプロパティを記述することになります。プロパティを継承しないのに、BEM はまったく再利用可能であると人々が言うのはなぜですか? 編集: 拡張機能をできるだけ使用しないようにしています。

次のコード スニペットをリファクタリングしてdouble 修飾子宣言を取り除くことはできますか?

必要な出力:

私は最近 BEM 構文をいじりましたが、BEM 要素について混乱しています。

ロゴとログインボックスを含むヘッダーがあります。だから私はこのような構造を作りました：

ご覧のとおり、 and を使用.header__logoし.header__login、その内部で.header__login別のブロックを使用し.login__emailました。

したがって、私の質問は、BEM の概念を正しく使用しているのか、それともクラスを次のように読む必要があるのか​​ということです。

ラッパーが必要な BEM ブロックに名前を付ける最良の方法がわかりません。たとえば、次のマークアップがあるとします。

一番上のラッパー (products-list) が少し失われているように感じます。

次のようなものを使用するには明らかに深すぎます。

では、子要素もラッパーである BEM でラッパーを処理するにはどうすればよいでしょうか。

このulタグは非常に一般的で、私は常に苦労しています。

最初に、WYSIWYG テキストの一般的なテキスト ブロック内の箇条書きを処理するために、ulおよびタグに基本スタイル ルールを定義しました。li私は BEM を使用しているのでul、別の役割 (メニューやニュース サムネイルのリストなど)にクラスを追加するだけでよいと考えました。

問題は、マークアップを常に制御できるとは限らないことです。私の現在の問題は、構造を使用するページネーションプラグインul/liですが、クラスをに追加することはできませんul.

私は BEM を使用しているので、子孫セレクター、特に要素セレクターを実際には使用したくありませんが、ul/liマークアップにアクセスできない場合は、おそらく使用する必要があることに気付きました。

ul/li私は非常に多くのサイトのいたるところにリストがあり、この問題を完全にマスターしたいと思っているので、特に基本/残りのルールについて、アドバイスをいただければ幸いです。

ありがとう

bemでドロップダウンメニューに名前を付ける最良の方法はどれですか?? 子 nav-main__sub または修飾子 nav-main--sub を使用 ??

BEM 方法論では、要素内にネストされた降誕要素の方が優れ
ているため、次のマークアップがあります。

私はブロックを持っています.product-list、それは要素を持っています.product-list__wrapper-img、その中に絵があり<img src="./images/mini-cart/1.jpg"> ます私が置いたブロックのスタイルを設定しています

BEM にあるように思われることはわかっていますが、タグへの連絡は望ましくないため、つまり、書き込みが不可能なようです

しかし、 img クラスを指定してスタイルを設定し、 BEM であるかどうかにかかわらず、要素内の要素になるとどうなりますか。私はモディフィケーターができることを知っていますが、私が知っている要素です。この写真に名前を付ける必要が あると思います。この問題について何か助けて.product-list__imgいただけれ .product-list__wrapper-img__img ば幸いです。

少し前に、私は BEM 方法論に興味を持ち、自分のプロジェクトでそれを使用しようとしました。私はおそらくそれのいくつかの変更されたバージョンを使用したので、私のcssは次のようになります:

ブロックの.block

要素の.block__element

ブロックおよび要素修飾子の.block--modifierおよび.block__element-- modifier。

要素内で要素を使用しないため、 .block__element-one__element -twoの代わりに.block__element-twoを使用しています。

それはすべて非常に便利に思えますが、私はまだいくつかの重要な原則を理解していません. たとえば、「独立したエンティティ」と見なされるべきものは何ですか?

ヘッダーを持つ 3 つの異なるブロックがあり、ヘッダーが同じルール セットを保持しているとします。ページ全体でこれらのヘッダーを使用しているため、おそらく他のページでも使用されているため、それらは独立しているように見えます。そのため、それらのブロックを作成して、毎回使用できます。この場合、ルールは 1 回だけ記述します。

ブロックとしてのヘッダーのデモ:

http://plnkr.co/edit/rCWCk3yGJJzAWpHqzpHa?p=preview

しかし同時に、すべてのヘッダーがいくつかの親ブロックの子であるため、それらに依存していることがわかります。次に、それらを要素と見なして、別の名前を付けることができます。この場合、同じ css を 3 回複製する必要があります。

要素としてのヘッダーのデモ:

http://plnkr.co/edit/nxh0ObqXDSRKg3N4zAKc?p=preview

では、どのようなアプローチを選択すればよいでしょうか。物事を独立したブロックまたは依存する要素として明確に識別する方法はありますか?

UPD 今日、私は BEM フォーラムで同様の質問をし、ミックスについて学びました。

https://ja.bem.info/method/definitions/#mix

BEM では、2 つのエンティティを一緒にブレンドする必要がある場合に mix が使用されます。私が理解しているように、同じものが同時にブロックと要素になる可能性があることを意味します。したがって、私の場合、要素をブロックと組み合わせることができます。これは次のようになります。

http://plnkr.co/edit/2VoROHHULVATpyejJmRn?p=preview

正式にはすべてのヘッダーは要素のままですが、すべての css ルールは .header ブロックで設定されます。エンティティを混ぜ合わせます。

必要なすべてのルールに対応する .header ブロックがあるため、おそらく html のヘッダー要素クラスは役に立たないままになることを意味します。それが通常の練習かどうかはわかりませんが、とにかく、ミックスを使用するとすべてがはるかに簡単になります。