SMACSS (CSS のスケーラブルおよびモジュール アーキテクチャ) を使用しています: http://smacss.com/

具体的には、Yahoo の Pure CSS (SMACSS) フレームワーク (Grids スタイルシートのみ) を使用しています: http://purecss.io/grids/

モジュール内にグリッドを配置するのは正しいですか?

たとえば、これは「foo」モジュール内のグリッドです。foo モジュールは、3 つの項目の行を表示する必要があります。

または、モジュールからグリッドを削除し、(グリッド クラスに依存する代わりに) レイアウトを実現するために独自の CSS を作成する方が、SMACSS 方法論とより一致していますか? 例えば：

私は SMACSS css の初心者です。私はそれに0.5秒程度の遷移があるこのクラスを持っています。アニメーションのように div に何かを追加するたびに、クラスをアタッチします。レイアウトや状態のようにする必要がありますか？l-anim または is-anim のように? 助けてください。ありがとう。

これが私のセットアップです：

ファイルの関係

home.php - ホームページの「レイアウト」HTML のアウトラインに使用されるファイル:

_layout.scss - home.php のインポートされていないコンテンツのスタイルを設定するために使用されるファイル:

animation.html - 上記でインポートした「アニメーション」という「モジュール」の html が含まれています。

_animation.scss - animation.html で html のスタイルを設定します

質問: _animation.scss でセレクターをカプセル化するにはどうすればよいですか?

可能性

1.) _animation.scss のすべてのセレクターを次のようにネストできます。

2.) 接頭辞「animation-」を追加することで、_animation.scss 内のほぼすべてのセレクターに名前空間を付けることができました (および対応する html 内)。

3.) 子セレクターを使用してカスケードを減らすことができますが、それが最善であるとは思えず、IE のサポートが貧弱です

4.) サブクラス化? しかし、モジュールをカプセル化して他のモジュール/レイアウトコードに漏れないようにするのではなく、モジュールを別の場所に移動することに関連していると思います

長々と質問してすみません、言葉にするのがぎこちなかったです。ベストプラクティスに関する追加のアドバイスや知識は大歓迎です

Nicolas Gallaghers のHTML セマンティクスに関する記事で、彼は html と css をモジュラー方式 (BEM アーキテクチャの影響を受ける) で構造化する方法を概説しています。彼は例を挙げていますが、私には完全には理解できません:

• まず、私が理解していないのは、ユーティリティとコンポーネントの違いは何ですか?
• そして、これら 2 つの表記の違いはどこから来るのでしょうか (ユーティリティ クラス名の前に「u-」が付きます)。
• 最後; 状態と修飾子の違いは何ですか (両方とも別の表記法があります)?

彼は彼の記事でこれについて詳しく説明していませんが、私はまだ理解したいと思っています. だから誰かがこれに答えてくれることを願っています。

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

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

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

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

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

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 :

マークアップ: