これは、BEM/SMACSS を使用する CSS アーキテクチャでよく遭遇する状況です。他の開発者がそれをどのように処理しているかを知りたいです。

複数のサイトで使用する CSS モジュールのライブラリがあります。、 など.btn-groupのモジュール.nav-tabs

次に、非常にサイト固有の方法でスタイル設定されたモジュールに遭遇します。ライブラリ モジュールの 1 つを使用するには、あまりにもユニークです。

Sass/Less ファイルにその「サイト モジュール」のコードがあり、レイアウト スタイルなど、そのサイトの他のスタイル コードと共に保存します。「ライブラリ モジュール」には保存されません。

私の質問は、「サイトモジュール」と「ライブラリモジュール」を区別するために何かしていますか?

SASSで「修飾子」と「要素」のBEM構文を使用しようとしています。

CSS ファイルは正しくコンパイルされますが、「grunt serve」コンパスを実行しようとすると、次のエラーがスローされます。

BEM の方法論では、次のような 2 つのクラスがあるとします。

.staff__teacher

と.staff__teacher--professor

教授のマークアップでは、両方のクラスを持つという考えですか、それとも変更されたクラスだけを持つという考えですか?

<div class='staff__teacher staff__teacher--professor'></div>

また

<div class='staff__teacher--professor'></div>

私の観点からは、後者の方が合理的で読みやすいため、後者を選択する方がはるかに理にかなっているように思えます。

Sass では、クラスを拡張するだけでクラスが作成されます.staff__teacher。

ただし、BEM で見たチュートリアルの大部分では、両方のクラスがマークアップに追加されています。ある方法が他の方法よりも好ましいかどうかを誰かが理解するのを手伝ってくれますか? 私の方法を使用すると問題が発生する可能性はありますか?

私たちは BEM を広範囲に使用していますが、コンポーネントの構造化と命名のいくつかの方法に直面しており、ベスト プラクティスに関する意見を求めています。再利用可能なコンポーネント ( .box、.media、 など.btn) には「オブジェクト」の概念を使用し、オブジェクトの組み合わせである傾向がある設計された UI コンポーネントには「コンポーネント」の概念を使用しています。

問題の例として、ワイヤーフレームからこれを考えてみましょう:

画像であるという考えは、この特定のアイテムで利用可能な他の画像の数に重ねられます。

このレイアウトに取り組むには少なくとも 2 つの方法があり、最適なオプションを見つけようとしています。

オプション1

コンポーネントとしてではなく、マークアップ/CSS でレイアウトを適用します。以下のすべてのスタイルは、プロジェクト間で再利用できます。プロジェクト固有のものはありません。

HTML :

CSS :

オプション 2

これを、画像とカウント用のボックスで構成されるコンポーネントとして実装します。

HTML :

CSS :

同じ CSS がbox/box--roundedに適用され、プロジェクト間で再利用するための一般的なものになります。コンポーネントは、このプロジェクトに対してのみ定義されます。

ご意見、ご感想、その他アイデア、大歓迎です！

BEM では、修飾子を使用すると、2 つのダッシュが意味をなすので、 で修飾子を区別できることを理解していmy-block-my-modifierますmy-block--my-modifier。

しかし、なぜblock__element代わりに使用するのblock_elementですか?

BEM や SUITCss などの CSS 命名規則の背後にある理由を取り上げて理解しようとしています。SCSS が存在する場合、子孫クラス名の値を理解するのに苦労しています。

例えば：

SCSS でルールをネストする機能があるため、祖先クラス名をコードに含める説得力のある理由がわかりません。上記では、子孫クラス名を使用して、「メニュー」内にある「項目」にのみ使用するスタイルを定義しました。しかし、ネストされた構造はすでにこれを伝えています! とにかく、menu__item のルールはメニューの下の項目にのみ適用されるのに、なぜそれをクラス名に含める必要があるのでしょうか?

なぜだめですか：

子孫の命名規則がより明示的で、おそらくより将来に適していることを理解しています。ただし、それは html でより明確になっているだけだと私は主張します。この「メニュー」モジュールの作成方法を調べたい場合は、CSS を調べるだけで、メニュー内に項目がどのようにネストされているかを明確に確認できます。

考えられる利点の 1 つは、次のようにネストされていない CSS を記述できることだと思います。

そして、どこでも「menu__item」を使用すると、これがメニューの下のアイテムのスタイリングであることがクラス名で明示されます..しかし、なぜそれをメニューの子孫として定義するのでしょうか? (別の利点は、ネストされていない場合の CSS 識別子文字列が短いことだと思います)

クラス名が別のクラス名の子孫として使用される場合、SCSS でのネストによってこれが達成され、そのロジックが明確に示されるように思えます。では、なぜこの BEM 構文が必要なのでしょうか?

この種の規則の理由を誰かに説明してもらいたいです。いわゆるベスト プラクティスを遵守したいのですが、規約を完全に理解せずにやみくもに遵守することは困難です。

注: BEM ではブロックと呼ばれるモジュールという言葉を使用します。また、変更された BEM 命名規則を使用して、回答にもそれを使用してください。BLOCK__ELEMENT--MODIFIER

.btn次のようなモジュールがあるとします。

そして、内部に.popup-dialogモジュールを作成する必要があります。.btn

SMACSS と BEM では、モジュール内のモジュールの配置をどのように処理する必要がありますか?

あなたの答えでは、正しい解決策を特定し、次のアプローチも分析してください: (以下のすべての例は、上記の CSS に基づいて構築または変更されていることに注意してください)

アプローチ1

.btn[内の元のクラスをオーバーライド.popup-dialog]

CSS :

マークアップ:

アプローチ 2

[ の中にサブクラスを追加する.popup-dialog]

CSS :

マークアップ:

アプローチ 3

.btn[修飾子付きサブクラス]

CSS :

マークアップ:

アプローチ 4

[.btnレイアウト クラスを持つサブクラス]

CSS :

マークアップ:

CSSを醜くするGruntタスクがあるのだろうか？GMail コードと同様に、すべてのクラス名はランダムな 2 ～ 3 文字です。

AngularJS と grunt-angular-templates Grunt タスクを使用して、views/ フォルダー内のすべてのテンプレートを単一のtemplates.js $templateCache ファイルに連結しています。このファイルをできるだけ小さくしたいと考えています。

index.html、main.css、およびviews/フォルダーに多数の HTML ファイルが含まれています。これらすべてのファイルのすべての CSS クラス名を醜くしたいのですが、「BEM クラス名表記法を使用しているため、CSS クラス名はむしろ長いです。

BEM CSS について読み、それを使用していくつかの小さなサイトをコーディングしました - 私はそれにかなり精通しています。ただし、非常に似ているが関係のないブロックをどのように処理するかについては、まだわかりません。

順序付けられていないリスト ブロックがたくさんあり、それらはすべて一番上の行に同じスタイルを持っているとします。他のリスト項目は異なるレイアウトにすることができ、すべて互いにまったく関係がありません。

ブロックに名前を付けると (たとえば、「latest-news」、「upcoming-events」)、CSS でこれらすべてのブロックをスタックするのが面倒になります。管理が難しいことは言うまでもありません。

このようなものは万能のソリューションではないことを理解してください。しかし、多くの人が同じ質問に直面することを想像してみてください。これらのブロックを「標準リスト」と呼び、リスト項目をブロックとして持つ方が効率的ではないでしょうか?

BEMが達成しようとしていることの原則全体に反しているようです。「最新ニュース」を好きな場所に配置できるはずです。このようにして、最新のニュースコンテンツを保持する正しい「標準リスト」を取得する必要がありますか?

あまり混乱しないことを願っています！どんなアドバイスも素晴らしいでしょう！