3

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

/* Utility */
.u-utilityName {}

/* Component */
.ComponentName {}

/* Component modifier */
.ComponentName--modifierName {}

/* Component descendant */
.ComponentName-descendant {}

/* Component descendant modifier */
.ComponentName-descendant--modifierName {}

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

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

4

2 に答える 2

2

ユーティリティ クラスは、基本的に、要素の 1 つの表示上の側面を変更するという点で、表示上のクラスです。これらは幅広く適用できるので便利です。ユーティリティ クラスをさまざまなコンポーネントに適用できます。特定のコンポーネントに固有のものではないため、コンポーネント修飾子として作成する必要はありません。

状態クラスは、状態が JavaScript によって追加、変更、または削除されることが多いという点で修飾子クラスとは少し異なります。したがって、状態クラスは、スタイルシートとスクリプトの間でどのクラスを共有する必要があるかを明確にするのに役立つ規則にすぎません。通常、スクリプトでモディファイア クラスにアクセスすることは望ましくありません。これにより、モディファイア クラスが特定のプレゼンテーションやコンポーネントに不必要に結合され始めるためです。

于 2014-03-21T13:23:35.417 に答える
0

わかりました、それで彼のソースコードを調べましたが、ユーティリティは、何かを「する」のではなく、何かを「行う」クラスのようです。したがって、ユーティリティは「.u-textAlignLeft」のようなものになり、コンポーネントは「.EnormousHeader」のようなものになります。

しかし、これは新しい問題を提起します: コンポーネントの状態とユーティリティの正確な違いは何ですか? 定義する必要があるとすれば、ユーティリティが何かを「実行」し (.u-textLeft)、状態がそのコンポーネントの範囲内でのみ意味をなす何かを「実行」します (.is-Disabled など)。

このとりとめのないことが誰かに役立つことを願っています!

于 2014-03-21T13:05:44.037 に答える