NEC CSS仕様書_html/css_WEB-ITnose

CSS仕様 - 分類方法

SSファイルの分類と参照順序

通常、プロジェクトに対して参照するCSSは1つだけですが、より大きなプロジェクトの場合はCSSファイルを分類する必要があります。

CSSの性質や目的に応じて、CSSファイルを「パブリックスタイル」「特殊スタイル」「スキンスタイル」の順に参照します（必要に応じてバージョン番号を付けるかどうかを決定します） 。

1. パブリック スタイル: 次の部分が含まれます: 「ラベルのリセットとデフォルト値の設定」、「背景画像を均一に呼び出し、フロートやその他の均一に処理する必要がある長いスタイルをクリアする」、「ウェブサイトの一般的なレイアウト」、「一般的なモジュール」およびその拡張機能」、「コンポーネントとその拡張機能」、「関数クラスのスタイル」、「スキン クラスのスタイル」。
2. 特殊なスタイル: 特定のカラムやページのスタイルがウェブサイト全体と大きく異なる場合、またはメンテナンス率が高い場合に、スタイルを独立して参照できます:「特殊なレイアウト、モジュール、コンポーネントおよび拡張機能」、「特殊な機能」 、色と背景」、または大きなコントロールまたはモジュールの独立したスタイルにすることもできます。
3. スキンスタイル: 製品にスキン変更機能が必要な場合は、色、背景などを抽出してここに配置する必要があります。

1 2 3

CSS 内のカテゴリとその順序

1. リセット (リセット) とデフォルト (ベース) (タグ): デフォルトのスタイルとブラウザの違いを削除し、パーツを設定します の初期スタイルラベルを付けて、後で作業の重複を減らします。 Webサイトのニーズに合わせて設定可能！
2. 統一処理: 背景画像 (ここでは複数のレイアウトやモジュール、コンポーネントで共有する画像を指します) とクリアフロート (ここでは汎用性の高いレイアウト、モジュール、コンポーネント内でのクリアを指します) をこの場所で統一して呼び出すことをお勧めします。ハンドルスタイル！
3. レイアウト (グリッド) (.g-): ページをいくつかの大きなブロック (通常はヘッダー、本文、メイン列、サイド列、末尾など) に分割します。
4. モジュール (.m-): 通常、再利用可能なより大きな意味論的な全体です。ナビゲーション、ログイン、登録、各種リスト、コメント、検索など！
5. コンポーネント (ユニット) (.u-): 通常、細分化できない比較的小さな個体であり、通常はさまざまなモジュールで再利用されます。ボタン、入力ボックス、読み込み、アイコンなど！
6. 関数 (.f-): いくつかの一般的に使用されるスタイルの使用を容易にするために、これらの頻繁に使用されるスタイルを分離し、必要に応じて使用します。通常、これらのセレクターにはフロートのクリアなどの固定スタイルのパフォーマンスがあります。虐待しないでください！
7. スキン (.s-): スキン スタイルを抽出する必要がある場合、通常はテキストの色、背景色 (画像)、境界線の色などです。スキンを変更しない Web サイトでは通常、テキストの色のみが抽出されます。スキンを変更しない Web サイトは、このカテゴリを悪用してはなりません。
8. ステータス (.z-): 識別を統一し、識別を容易にするためにステータス クラス スタイルにプレフィックスを追加します。組み合わせて使用​​するか、子孫 (.u-ipt.z-dis{}, . m-list li.z -sel{})、詳細は命名規則の拡張子関連項目を参照してください。

機能スタイルとスキン スタイルは表現力豊かなスタイルです。乱用しないでください。上記の順序は必要に応じて適宜調整することができる。

上記カテゴリの命名方法は命名規則を参照してください

/*リセット*/

CSS仕様 – 命名規則

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

ページ内でIDが一意であるということは、IDをセレクターとしてCSSを記述した場合、再利用できないことを意味します。

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

この仕様書では「-」はハイフンの意味を持ちません。

彼女は、分類プレフィックスデリミタと拡張デリミタの 2 つの意味のみを表します。詳細については、次の特定のルールを参照してください。

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

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

上記の詳細な説明については、分類方法の「CSS 内部の分類と順序」を参照してください。

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

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

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

子孫セレクターの命名

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

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

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

div,p ,ul,ol,li{マージン:0 ;padding:0 ;} /* デフォルト */ strong,em{font-style:normal;font-weight:bold;} /* 統合コールの背景画像 */ .m-logo a, .m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;} /* フロートを均一にクリア */ .g-bdc:after,.m- dimg ul:after ,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';} .g-bdc,.m-dimg ul,.u -tab{zoom:1;} /* レイアウト */ .g-sd{float:left;width:300px;} /* モジュール */ .m-logo{width :200px;高さ:50px;} /* コンポーネント */ .u-btn{高さ:20px;ボーダー:1px ソリッド #333;} /* 関数 */ .f-tac{text- align:center; } /* スキン */ .s-fc,a.s-fc:hover{color:#fff;}

/* ここでの .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;}

名前は簡潔かつ意味的にする必要があります。 1 2 3 4 5 6

/* 異議: 表現的または意味論的に非意味的な命名 */

.m-abc .green2{} .g- left2{}

/* 推奨: 短く意味のある名前を使用する */

.m-list .wrap2{}

.g-side2{}

同じセマンティクスによる異なるクラスの名前付け

方法: 区別するために数字または文字を追加するだけです (例: .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 つのモジュールが非常に似ているにもかかわらず、それらの間に依存関係がないことを望む場合、つまり拡張メソッドを使用したくない場合は、次のようにすることができます。 pass セレクターを組み合わせて共通のスタイルを設定します。

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

1 2 3 4 5 6 7 8 9 10

/* 2 つのコンポーネントの共通スタイル */ . u-tip1,.u-tip2{} .u-tip1 .itm,.u-tip2 .itm{} /* はそれぞれ 2 つのコンポーネントのスタイルです */ /*tip1 */ .u-tip1{} .u-tip1 .itm{} /*tip2 */ .u-tip2{} .u-tip2 .itm{}

汚染を防ぎ、汚染されました

モジュールまたはコンポーネントが互いにネストされ、同じラベル セレクターまたは他の子孫セレクターを使用する場合、内部のセレクターは外部の同じセレクターの影響を受けます。

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

CSS 仕様 - コード形式

セレクター、属性、値はすべて小文字です

xhtml 標準では、すべてのタグ、属性、値が小文字であることが規定されており、CSS についても同様です。

セレクター定義は 1 行で記述します

セレクターの検索と読み取りが簡単、新しいセレクターの挿入と編集が簡単、モジュールの識別が簡単など。余分なスペースを削除してコードをよりコンパクトにし、改行を減らします。

ネストされた定義がある場合は、内部単一行の形式にすることができます。

1 2 3 4 5 6 7 8 9 10 11

/* セレクターを 1 行で定義します * / .m-list li,.m-list h3{width:100px;padding:10px;border:1px Solid #ddd;} /* これはネストされた定義を持つセレクターです */ @media all and (max-width:600px){ .m-class1 .itm{height:17px;line-height:17px;font-size:12px;} .m-class2 .itm{width:100px;overflow: hidden ;} } @-webkit-keyframes showitm{ 0%{高さ:0;不透明度:0;} 100%{高さ:100px;不透明度:1;} }

最後の値もセミコロンで終わります

中括弧の終了前の値は通常セミコロンを省略できますが、変更・追加・保守作業時に無用なミスやトラブルの原因となります。

値が0の場合は単位を省略します

不要なバイトを節約し、読みやすくするために、0px、0em、0%などの値を0に省略します。

1	.m-box{margin:0 10px;background-position:50% 0;}

一重引用符を使用してください

URL 参照では引用符を省略し、その他は引用符が必要です必要に応じて一重引用符を使用します。

1 2	.m-box{background:url(bg.png);} .m-box:after{content:'.';}

を使用する16 進数は色の値を表します

透明度が必要で rgba を使用する場合を除き、表現方法 #f0f0f0 を使用して省略してみてください。

1	.m-box{color:#f00;background:rgba(0,0,0,0.5);}

属性の重要度に応じて順番に記述

のみ 水平方向の順序に従い、最初に配置レイアウト クラスの属性、バック ボックス モデルおよびその他の独自の属性を表示し、最後にテキスト クラスと変更クラスの属性を表示します。 ...

ディスプレイ可視性 位置floatクリアリストスタイルトップ.m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}属性間に相関関係がある場合は、個別に記述しないでください。 .m-box{position:relative;height:20px;line-height:20px;padding:5px ;color:#000;}プライベートが最初、標準が最後

幅	フォント
高さ	text-align
マージン	テキスト装飾
パディング	垂直整列
ボーダー	ホワイトスペース
オーバーフロー	カラー
最小幅	背景		1
		1 2	/* ここでの高さは line-height に関連します */
					最初にブラウザーのプライベート フラグを記述し、次に W3C 標準を記述します。

1

コメント形式: /* コメントテキスト */必要に応じて、均一なインデントの配置を維持するブロック コメントを使用できます。

.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000 ;}

セレクターに関するコメントはアノテーション付きオブジェクトの上の行に記述され、属性と値に関するコメントはセミコロンの後に記述されます。 コーディングエラーが発生した場合でもスタイルを正しく解析できるように、コメントコンテンツの両端にスペースが必要です。

原則として、各スタイルのシリーズには、名前、目的、注意事項などを簡潔かつ包括的に記載するコメントが必要です。

16

2 3

4 5

7

8

9

/* 注釈テキストをブロック

* 注釈テキストをブロックします .m-リスト{ color:#000;*color:#888;_color:#fff;}

* コメントをブロックしますtext */ .m-list{width:500px;} .m-list li{height:20px;line-height:20px;/* これは line-height * /overflow:hidden に関するコメントです;} .m-list li a{color:#333;} /* 一行コメントテキスト */ .m-list li em{color:#666;} 原則として、ハッキングは許可されていません 多くの非互換性の問題は、方法やアイデアを変更することで解決できますが、経験に基づいて、一部の互換性の問題を完全に回避することができます。

合理的な構造と合理的なスタイルでは、互換性の問題が発生することはほとんどありません。 ブラウザ自体の欠陥により、それを回避できない場合、適切なハックの使用を許可することがあります。 統一されたハック方法 IE7と6をハッキングするには、それぞれ「*」と「_」を統一して使用します。次のコードに示すように: 1 2 /* IE7 は灰色 #888 を表示し、IE6 は白 #fff を表示し、他のブラウザは黒 #000 を表示します */

推奨される適切な値の省略形

「推奨される適切な」というのは、省略形には常に一連の値が含まれており、特定の値を設定したくない場合がありますが、それが問題を引き起こすためです。その場合は、省略する必要はありません。代わりに、この時点では別々に書いてください。

もちろん、すべてを省略できる場合は、必ず省略してください。その最大の利点は、バイト数が節約され、メンテナンスが容易になり、読みやすくなることです。

省略方法についてはCSSマニュアルを参照してください。

セレクターの順序

次の順序を考慮してください:

大きいものから小さいものへ (セレクターの範囲に基づく)

低いものから高いものへ (レベルに基づく)

最初から最後まで (構造上の順序に従う) )

父から息子へ (構造的なネストの影響を受ける)

以下は簡単なデモンストレーションです:

/* 大きいものから小さいものまで */ セレクター レベル

1 2 3 4 5 6 7 8 9 10 11 12 13

.m-list p{margin: 0;padding :0;} .m-list p. part{margin:1px;padding:1px;} /* 低いものから高いものまで */ .m-logo a{color:#f00;} . m-logo a:hover{color:#fff; } /* 最初から最後まで */ .g-hd{高さ:60px;} .g-bd{高さ:60px;} g-ft{高さ:60px;} / * 父から息子へ */ .m-list{width:300px;} .m-list .itm{float:left;}

a = インライン スタイル スタイル。

b = ID セレクターの数。

c = クラス、疑似クラス、属性セレクターの数。

d = 型セレクターと疑似要素セレクターの数。

セレクターグレード(a,b,c,d)style=””1,0,0,0#ラッパー #コンテンツ {}0,2,0,0#content .dateposted {}0,1,1,0div#content {} 0,1,0,1#content p {}0,1,0,1#content {}0,1 、0 ,0p.comment .dateposted {}0,0,2,1div.comment p {}0,0 ,2.comment p {}0,0,1,1p.comment {}0,0,1,1 .コメント{}0,0,1,0divp{}0,0,0,2p{} 値の省略形

0、 0,0,1	CSS 仕様 - 最適化ソリューション

値を省略すると、CSS ファイルのサイズが削減され、可読性と保守性が向上します。

ただし、すべての値を省略する必要があるわけではありません。属性の値が省略されると、常にすべての項目が設定され、値に一部の項目を設定したくない場合もあります。

12 * そして上下はこのスタイルが気にするものではありません (設定されている場合、このコンテナ上の他のスタイルの使用に影響します)、パフォーマンスを消費する属性を避ける

3 4 5 6 7 /* たとえば、次のスタイルを使用して、固定幅のコンテナを水平方向に中央揃えにします。左右だけです

* したがって、現時点では略語は必要ありません */ .f-mgha{margin-left:auto;margin-right:auto;} /* たとえば、以下のモジュールのスタイル設定では、実際にはパディングのすべての項目を設定する必要がありますが、 */ .m-link{padding:6px 12px;} 一般的に使用される省略方法については、コード形式を参照してください。

以下にリストされている属性は、レンダリング パフォーマンスの問題を引き起こす可能性があります。しかし、時にはニーズがすべてを上回ることもあります...

12.class{width:expression(this.width>100?'100px) ' :'auto');}

3

4

/*expression */

/* フィルター */

.class{filter:alpha(opacity=50);}

セレクターのマージ

つまり、CSS セレクターの組み合わせにより、一度に複数のセレクターを定義でき、多くのバイトと貴重な時間を節約できます。

通常、定義を統一するために、同じ定義を持つ、またはほとんど同じ属性値を持つ一連のセレクター (関連しているため実際には同じ) を (カンマを使用して) グループ化します。

画像自体の最適化: 背景画像の最適化と結合

画質の要件と画像ファイルのサイズによって、使用する画像の形式が決まります。より良い画質を実現するには、より小さい画像ファイルを使用します。

画像がカラフルすぎて透明度が必要ない場合は、jpg 形式を使用してより高い品質で保存することをお勧めします。

画像がカラフルすぎて、透明度や半透明の要件、またはシャドウ効果がある場合は、png24 形式を使用し、IE6 で png8 劣化を実行することをお勧めします (または最後の手段としてフィルターを使用します)。

写真があまりカラフルでない場合は、透明度の要件があるかどうかに関係なく、ほとんどの場合、この形式を使用することをお勧めします。

画像にアニメーションがある場合、GIF形式のみ使用できます。

ツールを使用して画像を再圧縮することもできますが、色と透明度が影響を受けないことが前提条件となります。

個々のアイコンの間には隙間が必要です。隙間のサイズはコンテナのサイズと表示方法によって決まります。これの利点は、「耐障害性」が考慮され、イメージの保守性が向上することです。

アイコンの配置もコンテナのサイズと表示方法によって決まります。配置方法は、横配置（コンテナの幅制限あり）、縦配置（コンテナの高さ制限あり）、斜め配置（コンテナの幅と高さ制限なし）、左配置（コンテナの背景が左側）のタイプに分かれます。 、右配置（コンテナの背景が左側）右）、水平中央配置（コンテナの背景が水平中央）、垂直中央配置（コンテナの背景が垂直中央）。

結合された画像のサイズは 50K を超えてはならず、推奨サイズは 20K ～ 50K です。

複数の変更を行った後でも画像の品質を確保するには、元の PSD 画像のコピーを保存し、PSD で変更して追加し、最後に png にエクスポートしてください。

複数の画像の結合:

カテゴリの結合:

すべてのアイコンを 1 つの画像に結合することは、画像のサイズを制御することに加えて、次の方法にも注意する必要があります。

画像の配置に従って、同じ配置の画像を結合して、スタイルの制御を容易にします。

モジュールまたはコンポーネントに応じて、同じモジュールまたはコンポーネントに属する画像がマージされ、モジュールまたはコンポーネントのメンテナンスが容易になります。

画像サイズに応じて、同じまたは類似したサイズの写真を結合して、画像スペースを最大限に活用します。

画像の色に応じて、同じまたは類似した色の画像を結合して、結合された画像の色が濃すぎないようにし、色の歪みを防ぎます。

上記の方法を組み合わせます。

ハックの回避

回避のコストが高い場合、たとえば、大量の HTML を追加したり、より多くの CSS を記述する必要がある場合、利益が損失を上回ります。

豊富な実践経験は、これらの一般的な問題を理解し、さまざまなアイデアを使用して問題を回避するのに役立ちます。したがって、ここでは経験と思考方法が非常に重要です。

自分の能力に応じてハックの問題を解決してください。ハックを回避するために自信のない方法を使用することはお勧めしません。その方法自体にまだ発見されていない問題がある可能性があります。

CSS でできるなら JS を使わないでください

CSS にもっと多くのことをさせて、JS の開発量を減らしてください。

CSS を使用してインタラクションや視覚的な変更を制御します。JS はクラス名を変更するだけで済みます。

CSS を使用して複数のノードのスタイルを一度に変更し、複数のレンダリングを回避し、レンダリング効率を向上させます。

製品が以前のバージョンのブラウザと互換性がない場合は、アニメーションの実装を CSS に任せることができます。

読みやすく修正しやすい

「CSS仕様」の要件をすべて満たしていれば、自然と読みやすく修正しやすい美しいCSSが書けるようになります。

もちろん、コードの形式と命名規則は比較的重要です。

Clear CSS module

命名規則の要件を満たしている場合、CSS モジュールが明確に表示されます。

「コメント」を使用して各モジュールを説明することは、大きな CSS ファイルの場合に特に重要です。

ファイル圧縮

CSS を適切に作成すると、ファイルの内容を損なうことなく CSS を圧縮できるあらゆる手段を試してください。コメントや冗長なスペースや改行を圧縮することができます。削除されました。

圧縮ツールの詳細については、「HTML/CSS ツール」セクションを参照してください。

その他のフォーマットの最適化

最適化方法については、コードフォーマットを参照してください。

CSS仕様 - ベストプラクティス

ベストセレクター記述方法(モジュール)

1 2 3 4 5 6 7 8 9 10

/* 以下はレイアウトクラスに対して一律に行われますセレクター フローティング操作をクリアするには*/ .g-hd:after,.g-bd:after,.g-ft:after{ 表示 : ブロック ; 表示 : 非表示 ; コンテンツ : 0; " ;} .g-hd,.g-bd,.g-ft{zoom : 1; } /* 通常、背景は常に多くのバイトを占有するため、通常の状況では、一律に次のように呼び出します。 this* / .m-logo,.m-help ,.m-list li,.u-tab li,.u-tab li a{ 背景 : url (../images/sprite.png) no-repeat 9999px 9999px ;} .m-logo{background-position :0 0; } /* 以下は、実際に多くの要素がリンクまたは関連しているため、組み合わせて記述する方法を使用します。理解と変更を容易にすることができます*/ .u-tab li,.u-tab li a{ 表示 : インライン ; フロート : 左 ; 高さ : 30px ; .u-tab li{ margin :0 3px ; } .u-tab li a{ パディング :0 6px ;}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

/* これはモジュールです */ .m-nav {}/ * モジュールコンテナ */ .m-nav li,.m-nav a{}/* 共通性優先 組み合わせ最適化 */ .m-nav li{}/* 後は個別性 セマンティックタグセレクター * / .m -nav a{}/* 構造順における最後の人格の共通点 */ .m-nav a.a1{}/* 最後の人格の個性 */ .m-nav a2{} /* 人格後の人格 */ .m-nav .z-crt a{}/* インタラクション状態の変化 */ .m-nav .z-crt a.a1{} .m-nav .z-crt a.a2{} .m-nav .btn{}/* 典型的な子孫セレクター */ .m-nav .btn-1{}/* 典型的な子孫セレクター 拡張子 * / .m-nav .btn-dis{}/* 典型的な子孫セレクター拡張 (ステータス) */ .m-nav .btn.z-dis{}/* 機能は上記と同じです。選択してください2 つのうち 1 つ (IE6 と互換性がない場合に使用します) */ .m-nav .m-sch{}/* 他の内部モジュールの位置を制御します */ .m-nav .u-sel{ }/* 他の内部コンポーネントを制御します 場所 */ .m-nav-1{}/* モジュール拡張子 */ .m-nav-1 li{} .m-nav-dis{}/* モジュール拡張子 (ステータス) */ .m-nav.z-dis{}/* 機能は上記と同じです。どちらかを選択してください（IE6 に対応していない場合は、それを使用してください） */

docheadhead HDボディボディbdテールフットftメインバーメインmnメインコラム サブ-コンテナmaincmncサイドバーサイドsdサイド手すりコンテナsidecsdcボックスコンテナラップ/ボックスラップ/ボックスモジュール (.m-)、要素 (.u -) セマンティクス命名略語

レイアウト (.g-) ...

ナビゲーション

navnavサブナビゲーションサブナビゲーションナビパン粉パン粉crmメニューメニューメニューオプションカード タブタブタイトルエリアヘッド/タイトルhd/ttコンテンツエリア本文/コンテンツBD/CTリストリストlstフォームテーブルtbフォームフォームfmホットスポットホットホットランキングトップトップ...

フロートクリア

ログイン	ログイン	ログ
ロゴ	ロゴ	ロゴ
広告	広告	広告
検索	検索	sch
スライドショー	スライド	sld
ヒント	ヒント	ヒント
ヘルプ	ヘルプ	ヘルプ
ニュース	ニュース	ニュース
ダウンロード	ダウンロード	dld
登録	登録	登録
投票	投票	投票
著作権	著作権	cprt
結果	結果	最初
タイトル	タイトル	tt
ボタン	ボタン	ボタン
入力	入力	ipt

cbfl fr ibtactartalvamああdnfsfw ... フォントカラーフォントカラー fc背景背景bg

両方クリア
	floatleft	floatleft
	右にフロート	右にフロート
	インラインブロックレベル	インラインブロック
	テキスト中央揃え	textaligncenter
	テキスト右	textalignright
	左側のテキスト	textalignleft
	垂直中央	verticalalignmiddle
	オーバーフロー非表示	オーバーフロー非表示
	完全に消える	表示なし
	フォントサイズ	フォントサイズ
	フォントウェイト	フォントウェイト

背景色背景色背景画像背景画像背景の位置決め背景位置ボーダーカラーボーダーカラー ステータス (.z-) セマンティクス名前略語選択選択選択

bgc
bgi
bgp
bdc
現在	現在	crt

ショー表示非表示オープン閉じるエラーdis

CSS 仕様 - 典型的なエラー

NEC 仕様に準拠していないセレクターの使用

.class{}

カテゴリのないスタイルをメイン セレクターとして使用しないでください。このようなセレクターは、子孫セレクターとしてのみ使用できます。 m-xxx .class{} など。

.m-xxx div{}

セマンティクスのないタグをセレクターとして使用しないでください。現在または将来、セレクターが他の同様のタグを汚染しないことが確実でない限り、大規模な汚染が発生します。 。

.g-xxx .class{}

この子孫セレクターは内部の要素を汚染する可能性があるため、ページ レイアウトで子孫セレクターを使用しないでください。

.g-xxx .m-yyy{}.g-xxx .u-yyy{}

モジュールやコンポーネントの制御にレイアウトを使用しないでください。モジュールとコンポーネントはレイアウトから分離する必要があります。

.m-xxx .f-xxx{}.m-xxx .s-xxx{}

モジュールまたは他のクラス セレクターを通じて、すでに定義されている関数クラス セレクターおよびスキン クラスを再定義、変更、または追加しないでください。

.m-xxx .class .class .class .class{}

セレクターを冗長に記述しないでください。これにより、ファイル サイズが増加し、セレクターが狭い範囲に限定され、ツリー構造が複雑になりすぎます。厳密な適用範囲は制限されているため、3 ～ 4 文字以内で記述することをお勧めします。

セレクターは構造のネスト順序を完全に反映する必要はありません。逆に、できるだけ単純である必要があります。

.m-xxx .m-yyy .zzz{}

コントロールをオーバーライドしないでください。.zzz が .m-yyy の子孫セレクターである場合、.m-yyy 以外のセレクターは制御できません。または変更されました。

現時点では、.m-yyy-1 .zzz{} のように、.m-yyy の拡張子を使用して .zzz を変更できます。

拡張クラスの使用エラー

拡張クラスは、その基本クラスとして同じノードで同時に使用する必要があります。

エラー: class="g-xxx g-yyy-1" class="m-xxx-1" class="u-xxx u-yyy-1" class="xxx-yyy"。

正解: class="g-xxx g-xxx-1" class="m-xxx m-xxx-1" class="u-yyy u-yyy-1" class="xxx xxx-yyy"。

表示
	非表示	非表示
	オープン	オープン
	閉じる	閉じる
	エラー	エラー
	利用不可	無効