問題タブ [bem]

サイト全体で一般的な非ブロック固有のスタイルを定義する最良の方法は何ですか?

例えば：

html

サス/css

テキストのスタイルを同じにしたい場合、(プリプロセッサを使用している場合)とクラスに@extend .text入れるか、サイト全体のすべての段落に のクラスを持たせますか?.intro__text.profile__texttext

これらのソリューションは両方とも、私には少し間違っているようです。

非常に一般的なスタイルを使用している場合、レンダリングされた css 全体で多くのスタイルを複製する (ファイルサイズを大きくする) ように感じますがtext、マークアップ全体でクラスを繰り返すと、不必要に冗長で乱雑に見えます。

この状況のベスト プラクティスはありますか?

BEM の命名規則に従おうとしていますが、次の実装方法がわかりません。さまざまなテーマでスタイル設定する必要がある「ツールチップ」ブロックがあります。「デフォルト」のテーマを適用するとしましょう。

ツールチップは、さまざまな位置の要素の周りに配置できます。これは、ブロックに「水平位置」および「垂直位置」修飾子を追加する必要があるように思えます。

ここで、テーマとその位置の両方に応じて、ツールヒントに装飾を表示する必要があります。複数のクラスセレクターが必要だと思いますが、BEM のドキュメントでこのような複数のセレクターの例を見ることができません。

それは BEM 仕様で許可されていますか?
デメリットは何か思いつきますか？
フラット クラス セレクターのみを使用するようにコンポーネントを再考する必要がありますか?

SCSS で、冗長になることなく BEM サブコンポーネントを記述し、親クラスを使用してそれらを変更するための洗練された方法が必要です。

私はこれを試しましたが、うまくいきませんでした：

しかし、必要なセレクターが .container--red__title であると想定しているため、これは機能しません

BEM の命名規則を見てきました。

これらのメソッドでブートストラップ sass を使用したいと思います。

BEM スタイルのクラス名を使用するようにブートストラップを拡張することは可能ですか?

たとえば、BEM を使用して典型的なブートストラップ ナビゲーションに名前を付けるにはどうすればよいでしょうか。

何が関係し、どのように対処すればよいですか?

BEM を使用していますが、ブロック ( ) を「無効にする」方法を知りたい.elementです。無効にするということは、別の CSS 背景を使用して無効状態をエミュレートすることを意味します。

作成しようかな

そしてそれを適用する

はどう__titleですか？ブロック全体を上書きしたいので、私のアプローチが正しいかどうかはわかりません。

Overflow:hidden を使用して CSS のみのドロップダウン メニューを作成しましたが、Chrome でいくつかの問題が発生しています。ドロップダウン ボックスにカーソルを合わせると、最初は要素の一部しか表示されません。カーソルをリストに移動した後、残りも表示されますが、後で表示された残りの部分をホバーアウトすると、ドロップダウンに再びカーソルを合わせるまで画面に残ります。

JSFiddle

助けていただければ幸いです。

新しいプロジェクト (フォーム ページ) でBEMを試しており、フォーム入力をマークアップする最良の方法を探しています。

フォーム フィールドの「ブロック」の「要素」であると判断した、ラジオ ボタンの一般的なスタイルのセットがあります。だから私はそれにクラスを与えました：

ラジオ ボタンは常に の直接の子であるとは限りませんが.projectField、常にその子孫です。そう：

質問 1 : BEM のコンテキストでそれは OK ですか?

質問 2 : 特定のフィールド (「色」フィールドと呼びます) について、標準のラジオ ボタン レイアウトがありません。これらは、ページ上で視覚的に独自のブロックであるダイアグラムを含むフィールドの一部であるため、div に入れました。

ラジオボタンをマークアップするにはどうすればよいですか? 基本的なラジオ ボタンのスタイルが必要ですが、色設定フィールドの一部として独自のスタイルも必要です。

これですか？

多分

私は今のところ BEM が好きで、自分のマークアップについて真剣に考えざるを得ませんが、これをどのように進めればよいかわかりません。

BEM --modifier css 命名規則を使用する利点を理解するのに苦労しています。誰かがこれがなぜなのか教えてもらえますか:

これより良い？

BEM --modifier を使用すると、マークアップは明らかに肥大化します。