友人は、プロジェクトの特定のモジュール関数を確認または変更するようによく依頼します。彼らは、プロジェクトのソース コードを見ると、それらの無意味な ID (またはクラス) と非標準の CSS スタイルの記述を見つけます。本当に混乱しており、人々に頭痛の種を与えます。互換性コードが主要なブラウザと互換性を持たせるように記述されていない場合、CSS スタイルの記述順序は最終的な結果に影響を与えることは通常ありません。ただし、スタイルの記述が標準化されていない場合、後のメンテナンスに大きな支障をきたします。もしかしたら、フロントエンド開発はあなたが思っているほどカジュアルなものではないかもしれません。
もちろん、Yuan Chengxu が CSS スタイルの記述を厳密に標準化するための公式文書を見つけられなかったことをお詫びする価値はありますが、私はむしろ、私が読んだ記事の CSS の記述順序と対応する仕様に同意します。その記事の要点を全員と共有します。
【記事抜粋開始】
1. 位置属性（位置、上、右、表示、浮動小数点数など）
2. サイズ（幅、高さ、パディング、マージン） )
3. テキストシリーズ (フォント、行の高さ、文字間隔、カラーテキストの配置など)
4. 背景 (背景、境界線など)
5.など)
CSS の一部のプロパティ (パディング、マージン、フォントなど) は省略でき、これによりコードが簡素化され、ユーザーの読書エクスペリエンスが向上します。 。
多くのユーザーは短縮されたクラス名を好みますが、短縮できる前に人々があなたの名前を理解できる場合に限ります。
一部のカラーコードは省略できますが、ユーザーエクスペリエンスを向上させるために、できる限り省略するよう努めます。
1. 長い名前やフレーズでは、セレクターの名前にハイフンを使用できます。
2. CSS セレクターの名前に「_」アンダースコアを使用することはお勧めできません。
1.) 入力するときに Shift キーを 1 つ減らします。
2.) ブラウザーの互換性の問題 (IE6 では無効な _tips セレクターの名前付けの使用など)
3.) JavaScript 変数の名前を適切に区別できるようにする (JS)変数は "_" で名前が付けられます)
ここでは、ダッシュとアンダースコアの詳細な説明を示します。英語版: クリックして中国語版を表示: クリックして表示
ID は で一意ですJS では使用できません。複数回使用できますが、クラス セレクターは繰り返し使用できます。また、id の優先順位はクラスが優先されるため、id は必要に応じて使用し、乱用しないでください。
場合によっては、セマンティクスを明確にするために、ステータスを示すプレフィックスをセレクターに追加できます。たとえば、次の図では、「.is-」プレフィックスを追加します。
一般的な CSS 命名規則
Header: header
Content: content/container
Tail: footer
Navigation: nav
サイドコラム: サイドバー
コラム: コラム
ページ周辺制御 全体のレイアウト幅: ラッパー
左右中央
ログインバー: loginbar
ロゴ: logo
広告: バナー
ページ本体: main
ホットスポット: ホット
ニュース: ニュース
ダウンロード: ダウンロード
サブナビ: subnav
メニュー: メニュー
サブメニュー: サブメニュー
検索: 検索
フレンドリーリンク: フレンドリンク
フッター: フッター
著作権: copyright
スクロール :スクロール
コンテンツ: コンテンツ
タグ: タグ
記事リスト: list
ヒント: msg
ヒント: ヒント
列タイトル: タイトル
参加: joinus
ガイド: guide
サービス: service
登録: regsiter
ステータス: ステータス
投票: 投票
パートナー: パートナー
メモの書き込み:
/* ヘッダー */
コンテンツエリア
/* 終了ヘッダー */
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.cssbasically共有base.css
layout、layout.css
themes.cssscolumns.cssstextfont font font font
forms。 csspatch mend.css
print.css
[記事抜粋終わり]
CSSの書き方とそれに対応する仕様を誰もがよりよく学習できるように、コードマスターCheng Xuが特別にこの記事の内容を紹介します。は 1366 * 759 の画像になります。気に入った友人は、この画像をダウンロードしてデスクトップの背景として設定できます。これにより、コーディング時にこれらのルールを簡単に確認し、スタイル コードを記述するためのルールに厳密に従うことができます。 (追記: 画像をドラッグすると大きな画像が表示されます;)
この記事で言及されていないいくつかの事項については、Yuan Chengxu が次の記事で追加します。
CSS ファイル構造ディレクトリ:
1. ブラウザーのデフォルト スタイルをリセット
3. フォームとフォーム要素 4. リスト スタイル
6. その他の特定の機能ブロック
CSS スタイル モジュールの形式例:
Name: モジュール名
Level: レベル (グローバル、チャネル、関数)
サンプル:使用例、または変更されたモジュールが動作する直接ページを指定してください
説明: 追加手順
作成者: 作成者の日付 (2 桁の月、日、時)
Last Modify: 最終変更者の日付 (2 桁) 数値桁数 (年、月、日、時刻)
CSS コメント仕様:
1. ファイルの先頭にコメント (推奨)
/*
* @description: 中国語の説明
* @author : name
* @update : name (2015-11-16 08:16)
*/
2. モジュールのコメント (モジュールのコメントは別の行に記述する必要があります)
/* module: module1 by Yuan Chengxu*/
* これはコメント行 1 です.
/* TODO: xxxx by name 2015-11-16 08 :32 */
/* バグ修正: xxxx by name 2015-11-16 08:16 */
コード ブロックにコメントする (オプション) )、スタイル ステートメントをブロックに分割し、新しい行でコメントします
例: .cl -> Clearfix
4. IE 用の特別な定義が必要な場合は、「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) | この記事の共有を歓迎します。転載する場合は出典を明記してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
