問題タブ [bem]

そのため、使用するファイルが少ない（多くのファイル）、かなり適切なサイズのコードベースがあります。css を変換して BEM (実際には BEM の変形) を使用したいのですが、命名規則を含むより少ないファイルをリントする方法を見つけたいと思っています。

これを行う方法はありますか？

したがって、基本的には、すべてのデフォルトの css lint を使用し、さらに、壊れない可能性のある命名規則を定義したいと考えています。

たとえば、クラスは c-、u-、または o- で始まる必要があり、他のクラスは許可されていません。

Bootstrap SASS と Bootstrap SASS Loader を使用しています。

コア ファイルを変更せずに_bootstrap-customizations.scssBS のデフォルト変数をオーバーライドできるファイルを定義しています。

コア ファイルは、いくつかのa:hover, a:activeCSS 宣言を定義します。

なしaですべての要素に対して普遍的にオフにしたいと思います

• これを各リンクで明示的に定義する

• ネームスペースなどによって

• または使用して!important

a:hoverエフェクトを完全にオフにしたい( from _bootstrap-customizations.scss)。

それが重要な場合は、SASS ファイルの作成にも BEM 方法論を使用しています。

スタイルシートに BEM と SMACCS を使い始めたばかりですが、DOM で深くネストされた要素に名前を付ける限り、いくつかの問題に遭遇しました。たとえば、 という div があるとし.main-containerます。の最初のレベル内にネストされているのmain-containerは、慣例により という名前の追加の div.main-container__articleです。

これは物事が混乱するところです。その記事の div 内に、入れ子になった span タグを持つ段落が続くヘッダーがあるとします。クラスの先頭にそのまま追加し続けmain-container__articleますか?

親/子要素の名前付けに関しては、うさぎの穴はどこまで行くのでしょうか? 2 番目のレベルの要素でリセットして、そこから進むポイントはありますか?

SO OOCSSに問題があります。より移植性が高いはずですが、私が通常行っている方法と比較すると、移植性が低いと感じています。

私の例：

ウィジェットの証言があります。メイン コンテンツの本文 (背景が白) では、証言のフォントが黒になっています。ただし、フッター (青色の背景) では、証言に白いフォントが必要です。

OOCSS の前は、次のようなことをしていました。

この「古い」アプローチでは、ウィジェットをコンテンツ領域からフッターにドラッグするだけで、色が簡単に機能します。ウィジェットの CSS または DOM クラスを変更する必要はありません。

新しい OOCSS/BEM では、.testimonial クラスを ID (または場所) に結合することは想定されていませんが、次のようにサブクラス化する必要があります。

これに関する問題は、DOM に入って証言ウィジェットのクラスを変更しないと、コンテンツ領域からフッターに証言をドラッグできなくなったことです。開発者による手動の介入が必要なため、移植性が低くなります。一方、編集者がドラッグするだけでスタイリングが自動化される前は.

何か不足していますか？そこには確かな実例がないように思われますか？

次の設定があるとしましょう。

次に、このブロックのアクティブな状態を表示したいと思います。ブロック自体が緑の背景になり、要素 2 と 3 が太字のテキストになるとします。BEM の哲学を理解しているので、特異性をできるだけ低く保つために、子セレクターを使用しないでください。

それで、これは本当にそれを行う方法ですか？

更新:そして、SASSでそのソリューションをどのように記述しますか(非常に新しい)? これまでの私のセットアップ...ネストされたセレクターを使用できる場合、ここでのベストプラクティスは何ですか?

サブモジュールにあるモジュール要素に変更を加える必要がある場合、BEM を使用して css を記述する場合、モジュール要素をサブモジュールにネストするか、モジュール要素の新しいクラス名を作成しますか?

新しいクラスの作成

新しいクラス名 (つまりmodule--modifier__element) を作成することは、BEM の精神に近いようです。不必要な特異性を防ぎます。ただし、モジュール内の各要素に追加のクラスを追加するという多くの余分な作業も追加されます。

ネスティング

モジュール修飾子内に既存の要素クラスをネストする (つまり、module--modifier module__element {}特定性が追加されますが、(少なくとも大規模なモジュールの場合) 多くの作業が節約され、マークアップの保守が容易になります。たとえば、モジュールの修飾子を変更する必要がある場合)。すべての子要素で変更するのではなく、マークアップの 1 か所だけ変更する必要があります。

それに加えて、すべての子要素が変更されない場合は、css を参照して、どの子要素にクラスを追加する必要があるかを判断する必要があります。

サンプルコード