Code Guy が推奨する CSS の記述順序と対応仕様_html/css_WEB-ITnose

友人は、プロジェクトの特定のモジュール関数を確認または変更するようによく依頼します。彼らは、プロジェクトのソース コードを見ると、それらの無意味な ID (またはクラス) と非標準の CSS スタイルの記述を見つけます。本当に混乱しており、人々に頭痛の種を与えます。互換性コードが主要なブラウザと互換性を持たせるように記述されていない場合、CSS スタイルの記述順序は最終的な結果に影響を与えることは通常ありません。ただし、スタイルの記述が標準化されていない場合、後のメンテナンスに大きな支障をきたします。もしかしたら、フロントエンド開発はあなたが思っているほどカジュアルなものではないかもしれません。

もちろん、Yuan Chengxu が CSS スタイルの記述を厳密に標準化するための公式文書を見つけられなかったことをお詫びする価値はありますが、私はむしろ、私が読んだ記事の CSS の記述順序と対応する仕様に同意します。その記事の要点を全員と共有します。

【記事抜粋開始】

CSSの書き方

1. 位置属性（位置、上、右、表示、浮動小数点数など）

2. サイズ（幅、高さ、パディング、マージン） )

3. テキストシリーズ (フォント、行の高さ、文字間隔、カラーテキストの配置など)

4. 背景 (背景、境界線など)

5.など)

CSS 記述仕様

CSS の省略されたプロパティを使用する

CSS の一部のプロパティ (パディング、マージン、フォントなど) は省略でき、これによりコードが簡素化され、ユーザーの読書エクスペリエンスが向上します。 。

小数点の前の「0」を削除してください

短縮された名前

多くのユーザーは短縮されたクラス名を好みますが、短縮できる前に人々があなたの名前を理解できる場合に限ります。

16 進数のカラーコードの省略形

一部のカラーコードは省略できますが、ユーザーエクスペリエンスを向上させるために、できる限り省略するよう努めます。

ハイフン CSS セレクターの命名規則

1. 長い名前やフレーズでは、セレクターの名前にハイフンを使用できます。

2. CSS セレクターの名前に「_」アンダースコアを使用することはお勧めできません。

1.) 入力するときに Shift キーを 1 つ減らします。

2.) ブラウザーの互換性の問題 (IE6 では無効な _tips セレクターの名前付けの使用など)

3.) JavaScript 変数の名前を適切に区別できるようにする (JS)変数は "_" で名前が付けられます)

ここでは、ダッシュとアンダースコアの詳細な説明を示します。英語版: クリックして中国語版を表示: クリックして表示

ID を勝手に使用しないでください

ID は で一意ですJS では使用できません。複数回使用できますが、クラス セレクターは繰り返し使用できます。また、id の優先順位はクラスが優先されるため、id は必要に応じて使用し、乱用しないでください。

セレクターにステータスプレフィックスを追加する

場合によっては、セマンティクスを明確にするために、ステータスを示すプレフィックスをセレクターに追加できます。たとえば、次の図では、「.is-」プレフィックスを追加します。

CSS 命名規則 (ルール)

一般的な CSS 命名規則

Header: header

Content: content/container

Tail: footer

Navigation: nav

サイドコラム: サイドバー

コラム: コラム

ページ周辺制御 全体のレイアウト幅: ラッパー

左右中央

ログインバー: loginbar

ロゴ: logo

広告: バナー

ページ本体: main

ホットスポット: ホット

ニュース: ニュース

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

サブナビ: subnav

メニュー: メニュー

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

検索: 検索

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

フッター: フッター

著作権: copyright

スクロール :スクロール

コンテンツ: コンテンツ

タグ: タグ

記事リスト: list

ヒント: msg

ヒント: ヒント

列タイトル: タイトル

参加: joinus

ガイド: guide

サービス: service

登録: regsiter

ステータス: ステータス

投票: 投票

パートナー: パートナー

メモの書き込み:

/* ヘッダー */

コンテンツエリア

/* 終了ヘッダー */

ID 命名:

1) ページ構造

コンテナ: コンテナ

ヘッダー: header

コンテンツ: content/container

ページ本体: main

Tailor: footer

Navigation: nav

Sidebar:sidebar

column:column

ページ周辺制御全体レイアウト幅: ラッパー

左右中央

(2) ナビゲーション

ナビゲーション: nav

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

サブナビゲーション:subnav

トップナビゲーション: topnav

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

左Navigation: leftsidebar

right Navigation: rightsidebar

menu: menu

submenu: submenu

title: title

summary: summary

(3) 機能

ロゴ:ロゴ

広告:バナー

ログイン:ログイン

ログインバー:loginbar

登録:登録

検索:検索

リボン:ショップ

タイトル:タイトル

参加:ジョイナス

ステータス : ステータス

ボタン: btn

スクロール: スクロール

タブ: タブ

記事リスト: list

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

現在: 現在

ヒント: ヒント

アイコン: icon

メモ: note

ガイド: ガイド

サービス: サービス

ホットスポット: ホット

ニュース: ニュース

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

投票:投票

パートナー: パートナー

フレンドリーリンク: link

著作権: copyright

注:

1. 常に小文字を使用します。

3. 一目で理解できる場合を除き、単語を省略しないでください。スタイルシートファイルの命名

mainmaster.css

modulemodule.css

basically共有base.css

layout、layout.css

themes.cssscolumns.csss

textfont font font font

forms。 css

patch mend.css

print.css

[記事抜粋終わり]

CSSの書き方とそれに対応する仕様を誰もがよりよく学習できるように、コードマスターCheng Xuが特別にこの記事の内容を紹介します。は 1366 * 759 の画像になります。気に入った友人は、この画像をダウンロードしてデスクトップの背景として設定できます。これにより、コーディング時にこれらのルールを簡単に確認し、スタイル コードを記述するためのルールに厳密に従うことができます。 (追記: 画像をドラッグすると大きな画像が表示されます;)

この記事で言及されていないいくつかの事項については、Yuan Chengxu が次の記事で追加します。

CSS ファイル構造ディレクトリ:

1. ブラウザーのデフォルト スタイルをリセット

3. フォームとフォーム要素 4. リスト スタイル

6. その他の特定の機能ブロック

CSS スタイル モジュールの形式例:

Name: モジュール名

Level: レベル (グローバル、チャネル、関数)

Dependent: 依存関係、モジュールが依存する必要があるモジュール

サンプル:使用例、または変更されたモジュールが動作する直接ページを指定してください

説明: 追加手順

作成者: 作成者の日付 (2 桁の月、日、時)

Last Modify: 最終変更者の日付 (2 桁) 数値桁数 (年、月、日、時刻)

CSS コメント仕様:

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

/*

* @description: 中国語の説明

* @author : name

* @update : name (2015-11-16 08:16)

*/

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

/* module: module1 by Yuan Chengxu*/

…
/* module: module2 by Yuan Chengxu*/
3. 単一行コメントと複数行コメント
/* これは短いコメントです */Single-lineコメントは 1 行で書くことも、コメント内の行末に書くこともできます。各行の長さは、漢字 40 文字 (英語 80 文字) を超えてはなりません

/*

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

* これはコメント行 2 です。
*/
複数行のコメントは別の行に記述する必要があります
4. 特別なコメント

/* TODO: xxxx by name 2015-11-16 08 :32 */

/* バグ修正: xxxx by name 2015-11-16 08:16 */

変更、ToDo、その他の情報をマークするために使用されます
5. コメントをブロック
/* ヘッダー * /
/* フッター */

/* ギャラリー */

コード ブロックにコメントする (オプション) )、スタイル ステートメントをブロックに分割し、新しい行でコメントします

CSS の書き方メモ:
1. 1 行の属性、属性名と値の間、属性と "{}" の間にはスペースが必要です。例: .class { width: 400px; height: 300px;属性の順序:
2.1) 特殊なブラウザの属性は、標準属性の前に記述する必要があります。例: -webkit-box-shadow:; -moz-box-shadow:;新しいセレクター ルールを追加する場合は、特に ID を乱用しないように注意し、可能な限り既存のスタイルを継承して再利用してください。

3. セレクター、属性、および値はすべて小文字です (形式の色の値を除く)。セレクター名は略語の前に完全な名前を指定する必要があります。

例: .cl -> Clearfix

4. IE 用の特別な定義が必要な場合は、「CSS ハックの説明」を確認してください。

1. 5. 次のような冗長で非効率な CSS 記述方法を使用しないでください。

   6. ! important は注意して使用してください。次に、CSS で @import を使用することは避け、複数のレベルでネストしないでください。

   7.1 ) ステータスを示す単語を使用することをお勧めします: a->active

   7.2 ) 構造を示す: h->header、c->content、f->footer

   7.3 ) 領域を表す: mn->main、sd->side、nv-navigation、mu-> ;menu

   7.4 ) 表現形式: l-list、tab、p_pop

   8. ファイル名、ファイルエンコーディング、およびファイルサイズ

   8.1) ファイル名は小文字、数字、およびアンダースコアで構成する必要があります。 8.2) UTF-8 エンコーディングを使用することをお勧めします。UTF-8 (BOM ではなく) を使用し、HTML で UTF-8 エンコーディングを指定します。CSS で指定する必要はありません (デフォルトは UTF-8 であるため)。 8.3) 大きすぎる単一の CSS ファイルは避けてください (300 行未満を推奨)。

   9. 後の議論と調整を容易にするために、開発プロセス中の未決定事項には [!] を付ける必要があります。 CSS ハック

   すべての IE ブラウザに適用可能: . ie_all .foo { ... }

   IE6 のみ: .ie6 .foo { ... }

   IE7 のみ: .ie7 .foo { ... }

   IE8のみ: .ie8 .foo { ... }

   最終要約:

   標準化されたコーディングは、後のプログラムのメンテナンスに役立ち、他の人がその意味を理解しやすくなります。もしかしたら、あなたは自分のコーディング方法に慣れているかもしれませんが、優れたフロントエンド開発者になるためには、良いコーディング習慣を身につけることが不可欠な資質であり、習得するのは難しくありません。長期的な開発を考慮するために、Yuan Chengxu 氏は、誰もがこれらのコーディング習慣に注意を払うべきだと提案しています。

   もちろん、この記事で解説している内容が絶対に正しいガイドではありませんが、これらの内容を学ぶことで、最も基本的なCSSのコーディング規約を学ぶことができます。この記事の内容を参照し、自分のコーディング習慣と組み合わせて、自分に合った優れた標準化されたコードを作成できます。

   (このサイトの一部の CSS ファイルのスクリーンショット表示)
   出典: Code Jun (daimajun.com) | この記事の共有を歓迎します。転載する場合は出典を明記してください。