フロントエンド CSS 命名規則_html/css_WEB-ITnose

この記事では、ファイル仕様、アノテーション仕様、ネーミング仕様、記述仕様、テスト仕様など、Web フロントエンド開発におけるさまざまな CSS 仕様を整理します。

1. ファイル仕様

1. ファイルは、合意されたディレクトリにアーカイブされる必要があります。

具体的な要件は、Douban の CSS 仕様を通じて説明されています。

すべての CSS は、一般カテゴリとビジネス カテゴリの 2 つのカテゴリに分類されます。共通の CSS ファイルは次のディレクトリに配置されます:

基本スタイル ライブラリ/css/core

一般 UI 要素スタイル ライブラリ/css/lib

JS コンポーネント関連のスタイル ライブラリ/css/ui

ビジネス クラスの CSS は Refers特定の製品に関連するファイルは、次のディレクトリに配置されます:

Reading/css/book/

Movie/css/movie/

Music/css/music/

Community/css/sns/

Small site / css/site/

city/css/location/

Radio/css/radio/

外部 CSS ファイルは、サイト全体および製品レベルに共通する大きなファイルに適しています。インライン CSS ファイルは、1 つまたは複数のページにわたって共有される CSS に適しています。特定の CSS の別のペアが文書化されています。例:

util-01 リセット /css/core/reset.css

util-02 ユニバーサル モジュール コンテナ/css/core/mod.css

ui-01 のように button/css/core/fav_btn.css

ui-02. ビデオ/アルバム リスト item/css/core/media_item.css

ui-03. 評価 star/css/core/reading.css

ui-04. 共通ボタン/css/core/common_button.css

ui-05. ページネーション/css/core/pagination.css

ui-06. 推奨ボタン/css/core/rec_btn.css

ui-07. 古いダイアログボックス/css/core/old_dialog.css

ui-08. タブの古いバージョン /css/core/old_tab.css

ui-09. メンバーリストの古いバージョン/css/core/old_userlist.css

ui-10. /notify.css

ui-11. コミュニティ ユーザー ナビゲーション/css/core/profile_nav.css

ui-12. 現在の大規模コミュニティ ナビゲーション/css/core/site_nav.css

ui-13。 /loading .css

2. ファイルの導入は外部リンクまたはインラインメソッドで行うことができます。

アウトライン方式: (型宣言 type="text/css" は省略可能)

インライン方式: (型宣言 type="text/css" は省略可能)

link タグと style タグは両方ともhead では、原則として HTML 上に直接スタイルを記述することはできません。 CSS で @import を使用することは避け、複数のレベルにネストしないでください。

3. ファイル名、ファイルエンコーディング、ファイルサイズ

ファイル名は小文字、数字、アンダースコアで構成する必要があります

ファイルは UTF-8 でエンコードする必要があります (BOM ではなく)。 HTMLではUTF-8エンコードを指定します。CSSではデフォルトがUTF-8なので指定する必要はありません。

単一の CSS ファイルとして大きすぎないようにします (300 行未満を推奨)

2. コメントの仕様

1. ファイルの先頭にコメント (推奨)

/*

* @ description: 中国語の説明
* @author: name
* @update: name (2013-04-13 18:32)
*/
5. コードをコピー

2. モジュールコメント

/* module: module1 by Zhang San */

…
/* module: module2 by Zhang San*/
3. コードをコピー

モジュールのコメントは別の行に記述する必要があります

3. -line comments

/* これは短いコメントです */

単一行のコメントは、別の行または行の最後に記述できます。コメント内の各行の長さは、漢字 40 文字を超えてはなりません。英語80文字。

/*

* これはコメント行 1 です。

* これはコメント行 2 です。

*/

複数行のコメントは別の行に記述する必要があります

4. 特別なコメント

/* TODO: xxxx by name 2013 -04-13 18:32 */

/* BUGFIX: xxxx by name 2012-04-13 18:32 */

変更、ToDo、その他の情報をマークするために使用されます

5. コメントをブロックします。

/* ヘッダー */

/* フッター */
/* ギャラリー */
3. コードをコピーします

コードブロック (オプション) をコメントアウトし、スタイルステートメントをブロックに分割して配置します新しい行にそのメモが表示されます。

3. 命名規則

意味のある、または共通の ID とクラスの名前を使用する: ID とクラスの名前は、要素の機能を反映するか、抽象的で曖昧な名前の代わりに一般的な名前を使用する必要があります。要素の目的を反映することが推奨されます。一般的な名前を使用することは、その要素に特定の意味がなく、兄弟要素と何ら変わらないことを意味し、通常は補助的な名前を付けるために使用されるため、機能名または一般名を使用する方が適しています。ドキュメントまたはテンプレートの変更。

/* 非推奨: 無意味*/ #yee-1901 {}

/* 非推奨: スタイル関連*/ .button-green {}.clear {}

/* 推奨: 特異性*/ #gallery {} #login {}.video {}

/* 推奨: 汎用性*/ .aux {}.alt {}

よく使われる名前 (英単語を覚えて調べてください): ページ、ラップ、レイアウト、ヘッダー (ヘッド) 、フッター (フット、フィート)、コンテンツ (続き)、メニュー、ナビゲーション、メイン、サブメイン、サイドバー (サイド)、ロゴ、バナー、タイトル (ティット)、ポポ (ポップ)、アイコン、メモ、btn、txt、iblock、 window(win)、ヒントなど

ID とクラス名は、意味を表現するのに十分である限り、短いほど良いです。これは理解に役立つだけでなく、コードの効率も向上します。

/* 非推奨*/ #navigation {}.atr {}

/* 推奨*/ #nav {}.author {}

タイプセレクターは、タグ、ID、およびクラスを配置すると同時にタグ、ID、クラスを使用することを回避します。要素選択セレクター; パフォーマンス上の理由から、セレクターのレベルも可能な限り減らす必要があります。

/* 推奨されません*/ul#example {}div.error {}

/* 推奨*/#example {}.error {}

名前を付けるときの注意点:

ルールの名前付けでは、常に使用します小文字とアンダースコアは使用できません。

名前を付けるときは、中国語のピンインを使用しないでください。

名前を付けるときは、略語に注意してください。ただし、むやみに省略しないでください。 、共通 CSS 命名規則を参照してください

1、2、3 などのシリアル番号による命名は許可されません

クラス名と ID 名の重複を避けてください

id は親コンテナ領域を識別するために使用されます

モジュールまたはページの名前は一意でなければなりません。

クラスは特定の種類のオブジェクトを識別するために使用され、名前は簡潔でなければなりません。

コードモジュールの再利用を可能な限り増やし、可能な限りスタイルの組み合わせを使用してください

ルール名には、色 (赤/青)、位置 (左/右)、およびルールに関連するその他の情報を含めないでください。特定の表示効果。名前には、表示結果のスタイルではなく、意味を込めて名前を付ける必要があります。

1. よく使用される ID の命名:

(1) ページ構造

コンテナ: コンテナ

ヘッダー: header

コンテンツ: content/container

ページ本体: main

Tailor: footer

N航空 ： nav

サイドバー: サイドバー

列: 列

ページ周辺コントロール全体のレイアウト幅: ラッパー

左右中央

(2) ナビゲーション

ナビゲーション: nav

メインナビゲーション: mainbav

サブナビゲーション: subナビ

上部ナビゲーション: topnav

サイド ナビゲーション: サイドバー

左側のナビゲーション: leftsidebar

右側のナビゲーション: rightsidebar

メニュー: メニュー

サブメニュー: サブメニュー

タイトル: タイトル

概要: 概要

(3)機能

ロゴ: ロゴ

広告: バナー

ログイン: ログイン

ログインバー: ログインバー

登録: regsiter

検索: 検索

リボン: ショップ

タイトル: タイトル

参加:

ステータス: ステータス

ボタン: btn

スクロール: スクロール

タブページ: タブ

記事リスト: list

プロンプトメッセージ: msg

現在: 現在

ヒント: ヒント

アイコン: icon

メモ: 注意

ガイド: ギルド

サービス: サービス

ホットスポット: ホット

ニュース: ニュース

ダウンロード: ダウンロード

投票: 投票

パートナー: パートナー

フレンドリーリンク: リンク

著作権:

2一般的に使用されるクラスの名前:

(1) 色:

.red { color: red }

.f60 { color : #f60; などの色名または 16 進コードを使用します。 ff8600 { color: #ff8600; }

(2) フォント サイズ。

.font12px { font-size: 12px }

.font9pt {font-サイズ: 9pt; }

(3) 配置スタイル。

.left { float:left; }

(4) ) タイトル バー スタイル。「カテゴリ + 関数」メソッドを使用して名前を付けます。例:

.barnews { }

.barproduct { }

4. 仕様の作成

1. 組版仕様

(1) 使用タブを使用したり、スペース + タブをインデントとして使用したりする代わりに、スペースを 4 つ使用します。

(2) ルールは 1 行または複数行で記述できますが、ファイル全体のルール レイアウトは均一である必要があります。 -線の書き方

HTML でインライン CSS を記述する場合は、必ず 1 行で記述してください。

各ルールの中括弧 { の前後にスペースを追加します。

Before属性名のコロン スペースを追加しないでください。コロンの後にスペースを追加します。

各属性値の後にセミコロンを追加する必要があります。

複数のセレクターがスタイル セットを共有する場合は、複数のセレクターを使用します。複数行形式で記述する必要があります

複数行の書き方の制約

各ルールの中括弧 { の前にスペースを追加します

複数のセレクターはスタイル セットを共有する必要があります。 -line 形式;

各ルールの末尾の中括弧は、ルール セレクターの最初の文字と揃える必要があります。

属性名のコロンの前にスペースを追加しないでください。

属性値の後にセミコロンを追加します。

2. 属性の書き込み順序

表示属性: display/list-style/position/float/clear …

自己属性 (box モデル): width/height/margin/padding /border

背景:background

行の高さ:line-height

テキスト属性:color/ font/text-decoration/text-align/text-indent/vertical-align/white-space/content…

その他: Cursor/z-index/zoom/overflow

CSS3 プロパティ:transform/transition/animation/box-shadow/border-radius

CSS3 属性を使用する場合、ブラウザーのプレフィックスを追加する必要がある場合は、その順序で追加します-webkit- / -moz- / -ms- / -o- / std の順に並び、最後に標準の属性を記述します。

次の順序に従ってリンク スタイルを追加してください: a:link -> a:visited -> a:hover -> a:active

3. 単一引用符を使用します。二重引用符は使用できません;

最後のステートメントであるかどうかに関係なく、各ステートメントはセミコロンで終了する必要があります;

16 進数の色とフォントの設定を除き、CSS ファイル内のすべてのコードは小文字である必要があります;

In の繰り返しを除くブラウザのデフォルト スタイルの設定に加えて、CSS スタイル設定を HTML タグに直接追加することは禁止されています。

各ルールではセレクターが一意であることを保証する必要があり、グローバル .nav/.header/ の属性を直接設定することも禁止されています。 body およびその他のクラス;

4. コードのパフォーマンスの最適化

margin、padding、border の -left/-top/-right/-bottom 設定を組み込み、短い名前を使用するようにしてください。

セレクターのネストとクエリの消費を減らすために、セレクターは機能を満たすためにできるだけ短くする必要があります。ただし、グローバル スタイル設定をオーバーライドすることは避けてください。

セレクターの性能に注意し、性能の低いセレクターは使用しないでください。

CSS内で*セレクターを使用することは禁止されています。

classやidがある場合は、必要な場合を除き、その要素に対応するタグを記述する必要はありません。

0 の後に単位は必要ありません。たとえば、0px は 0 に省略でき、0.8px は .8px に省略できます。

色が 16 進数で表現される場合、色の値は大文字である必要があります。

可能であれば、色を表すために 3 文字を使用するようにしてください。たとえば、#AABBCC は #ABC と書かれます。

ボーダーがない場合はborder:0と書かずにborder:noneと書いてください。

AlphaImageLoader の使用は避けてください。

コードを分離した状態に保つことを前提として、重複するスタイルを可能な限りマージするようにしてください。

背景やフォントなど、省略できる属性については、省略した形式を使用するようにしてください。

5. CSS ハックの使用

ブラウザ検出と CSS ハックを常に使用せず、最初に他のソリューションを試してください。コードの効率性と管理性を考慮すると、これら 2 つの方法はブラウザーの解析の違いをすぐに解決できますが、最後の手段として考える必要があります。長期的なプロジェクトでは、ハッキングを許可するとさらに多くのハッキングが発生するだけであり、使えば使うほどその依存度は高まります。

以下を使用することをお勧めします:

[/url]

6. フォントルール

ファイルのマージやコード変換によって発生する問題を防ぐために、スタイルの中国語フォント名を対応する英語名 (SimHei、SimSun、Microsoft Yahei、間にスペースを挟んだいくつかの単語など) に変更することをお勧めします。引用符で囲んでください)

フォントの太さには特定の値が使用され、太字は700、標準は400と書かれます

フォントサイズは単位としてpxまたはptで指定する必要があります。pxが推奨されます(注: ptはフォントです)印刷版のサイズ設定)、xx-small/x-small/small/medium/large/x-large/xx-large などの値は使用できません

font-familyの値を統一するため各オペレーティングシステムでの各ブラウザのサポートを強化します ブラウザの互換性のため、フォントファミリーをビジネスコード内で任意に設定することはできません

5. その他の仕様

サイト全体の CSS や一般的なものを簡単に変更しないでくださいCSS ライブラリ。変更を加えた後は、徹底的にテストする必要があります。

フィルターの使用を避けてください

CSS での式の使用を避けてください

小さすぎる背景画像タイルを避けてください。

CSS では ! important を使用しないようにしてください

CSS では「*」セレクターを絶対に使用しないでください

レベル (z-index) は明確で明確でなければならず、ページのポップアップとバブルは最高レベル (最高レベルは 999)、異なるポップアップ バブルは 3 桁の間で調整できます。通常のブロックは 10 ～ 90 の範囲で 10 の倍数であり、ポップアップは現在の親レベルで 1 桁ずつ増加します。レベルは禁止されています。

httpリクエストを減らすため、背景画像には可能な限りスプライト技術を使用してください。 複数人での共同開発を考慮して、モジュール、ビジネス、ページごとにスプライトを分割できます。

6. テスト仕様

1. ブラウザーの特殊効果のサポートを理解する

ページのパフォーマンスを考慮して、ブラウザーが CSS3 関連の属性をサポートしていない場合、ブラウザーの一部の特殊効果はサポートされなくなります。表に示すように (Y はサポートされていることを意味し、N はサポートされていないことを意味します):

A レベルの設定そしてビジュアル 完全なデザインの要件に準拠します

レベル B - 視覚的な違いは許容されますが、ページの全体的な効果を壊すものではありません
レベル C - デザインの詳細は無視できますが、使用を妨げるものではありません

3。スタイルテストツール

W3C CSS バリデーター: http://jigsaw.w3.org/css-validator/

CSS Lint: http://csslint.net/

CSS の使用法: https://addons.mozilla.org/en -us/firefox /addon/css-usage/