CSS コードの命名規則

クラスセレクターを使用し、IDセレクターを放棄します

ページ内でのIDの一意性は、IDをセレクターとしてCSSを作成した場合、再利用できないことを意味します。

NEC 特殊文字: 「-」ハイフン

この仕様では、「-」はハイフンの意味を表しません。

彼女は 2 つの意味のみを表します: 分類接頭辞区切り文字と拡張区切り文字 詳細については、次の特定の規則を参照してください。

カテゴリの命名方法: 接頭辞として 1 つの文字 + 「-」を使用します

レイアウト (グリッド) (.g-); モジュール (モジュール) (.m-); 関数( 関数) (.f-); スキン (.s-);

注: スタイル内のセレクターは常に最初の 5 つのカテゴリから開始し、その後内部で子孫セレクターを使用する必要があります。

これら 5 つのカテゴリでニーズを満たせない場合は、1 つ以上の追加カテゴリを定義できますが、それらは 1 文字 + 接頭辞として「-」を付けるという命名規則、つまり .x- 形式に準拠する必要があります。

特別: .j- はノードを取得するための JS にのみ使用されます。スタイルを定義するために .j- を使用しないでください。

子孫セレクターの命名

単一文字 + "-" が接頭辞として付いておらず、長さが 2 以上のクラス セレクターは子孫セレクターであることが合意されています。たとえば、 .item は次の各項目です。 m-list モジュール、.text m-list モジュールのテキスト部分です: .m-list .item{}.m-list .text{}。

セマンティック タグは、.m-list li{} などの子孫セレクターにすることもできます。

単一文字のクラス セレクターは許可されません。その理由については、以下の「モジュールとコンポーネントの子孫セレクターの拡張クラス」で詳しく説明します。

子孫セレクター メソッドを使用すると、その名前が使用されているかどうかを考慮する必要がなくなります。これは、現在のモジュールまたはコンポーネントでのみ有効になるためです。同じスタイル名を、異なるモジュールまたはコンポーネントで再利用できます。相互に干渉します。その影響は、複数の人が共同作業したり、サブモジュールで共同作業したりする場合に特に顕著です。

子孫セレクターは構造ツリー レベルを完全に表す必要はなく、できるだけ短くする必要があります。

注: 汚染の可能性が高くなるため、ページ レイアウトでは子孫セレクターを使用しないでください。

/* 这里的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 这里的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}

名前は単純である必要がありますが、セマンティックではありません

/* 反对：表现化的或没有语义的命名 */
.m-abc .green2{}
.g-left2{}
/* 推荐：使用有语义的简短的命名 */
.m-list .wrap2{}
.g-side2{}

同じセマンティクスを持つ異なるクラスの名前付け

方法: Direct Justそれらを区別するために数字または文字を追加します (例: .m-list、.m-list2、.m-list3 などはすべてリスト モジュールですが、完全に異なるモジュールです)。

その他の例: .f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2など。

モジュールやコンポーネントの拡張クラスの命名方法

A、B、C、…が同じ型で見た目に違いがほとんどない場合、その中で最も出現率の高いものを名前として使用します。基本クラス、その他は基本クラスの拡張です。

メソッド: + "-" + 数字または文字 (例: .m-list の拡張クラスは .m-list-1、.m-list-2 など)。

追加: 基本クラス自体は独立して使用できます (例: class="m-list")、拡張クラスは基本クラスに基づいて使用する必要があります (例: class="m-list m-list) -2")。

拡張クラスがさまざまな状態を表す場合は、u-btn-dis、u-btn-hov、m-box-sel、m-box-hov などの名前を付けて、次のように使用できます。これ: クラス ="u-btn u-btn-dis"。

Web サイトが IE6 などのブラウザーと互換性がない場合、ステータスを識別する方法には、独立したステータス分類 (.z-) メソッド (.u-btn.z-dis、.m-box.z-) を採用することもできます。 sel を作成し、次のように使用します: class="u-btn z-dis"。

モジュールとコンポーネントの子孫セレクターの拡張クラス

モジュール内に同様のものがある場合がありますが、コンポーネントや拡張機能にしない場合は、子孫セレクターや拡張機能を使用することもできます。

子孫セレクター: .m-login .btn{}。

子孫セレクター拡張子: .m-login .btn-1{}、.m-login .btn-dis{}。

独立したステータス分類 (.z-) メソッド: .m-login .btn.z-dis{} を取得し、それを次のように使用することもできます: class="btn z-dis"。

注: このメソッドはクラス セレクターに使用されます。ラベルをセレクターとして直接使用する場合は、この名前付けメソッドを使用する必要はありません。

注: 拡張クラスと子孫セレクターの大規模クラスの命名規則が競合しないようにするために、子孫セレクターでは 1 つの文字を使用することはできません。

例: .m-list .a{} は許可されません。.a を拡張する必要がある場合、.a-bb になり、大きなカテゴリの命名規則と矛盾するためです。

グループ化セレクターは拡張メソッドを置き換えることができます

同じタイプの 2 つのモジュールが非常に似ているにもかかわらず、それらの間に依存関係がないことを望む場合、つまり拡張メソッドを使用したくない場合は、Combine を渡すことができます一般的なスタイルを設定するセレクター。

このメソッドを使用する前提条件は、同じ型、機能、外観が似ており、メンテナンスが容易なように同じコード領域に記述されているということです。

  /* 两个元件共性的样式 */
.u-tip1,.u-tip2{}
.u-tip1 .itm,.u-tip2 .itm{}
/* 在分别是两个元件各自的样式 */
/* tip1 */
.u-tip1{}
.u-tip1 .itm{}
/* tip2 */
.u-tip2{}
.u-tip2 .itm{}

汚染と汚染を防ぐ

モジュールまたはコンポーネントが互いにネストされ、同じラベルセレクターまたは他の子孫セレクターを使用すると、内部のセレクターはInfluenceの外部の同じセレクターによって選択されます。

そのため、モジュールまたはコンポーネントがネストされているか、他のモジュールまたはコンポーネントにネストされている可能性がある場合は、タグ セレクターを慎重に使用し、必要に応じてクラス セレクターを使用し、命名方法に注意して、 .m-layer .layerxxx 、 を使用できます。 m-list2 .list2xxx 形式は、子孫セレクターの汚染を軽減します。