CSSの命名と書き方の標準化

CSS 命名規則

1つ。ファイルの命名規則

グローバル スタイル: global.css; フレームレイアウト:layout.css; フォントスタイル: font.css; リンクスタイル: link.css; 印刷スタイル: print.css; 二。共通のクラス/ID 命名規則

ヘッダー: ヘッダー
コンテンツ: コンテンツ
コンテナ: コンテナ

フッター: フッター

著作権：著作権

ナビゲーション: メニュー

メインナビゲーション: mainMenu
サブナビゲーション: サブメニュー
ロゴ: ロゴ
スローガン: バナー
タイトル: タイトル
サイドバー: サイドバー
アイコン: アイコン
注意: 注意
検索: 検索
ボタン: ボタン
ログイン: ログイン
リンク: リンク
情報ボックス: 管理
……

よく使用されるクラスの名前は、できる限り一般的な英単語に基づいて理解しやすくし、適切な場所に注釈を付ける必要があります。二次クラス/ID の命名には、複合書き込みモードが採用され、最後の単語の最初の文字は大文字にする必要があります。たとえば、「検索ボックス」は「searchInput」、「検索アイコン」は「searchIcon」、 「検索ボタン」「「searchBtn」という名前を付けました...



CSSの書き方と仕様書

1. 従来の執筆基準と手法

1. DOCTYPE を選択します:

XHTML 1.0 では、次の 3 つの DTD 宣言から選択できます:

移行: 要件が非常に緩い DTD で、HTML4.01 ロゴを引き続き使用できます (ただし、xhtml 記述方法に準拠する必要があります)。完全なコードは次のとおりです:

厳密: 厳密な DTD の場合、
などのプレゼンテーション層の識別子と属性は使用できません。完全なコードは次のとおりです:

フレームセット: フレーム ページ用に特別に設計された DTD。ページにフレームが含まれている場合は、この DTD を使用する必要があります。完全なコードは次のとおりです:

理想的な状況はもちろん厳密な DTD ですが、Web 標準に慣れていないほとんどのデザイナーにとって、現時点ではトランジショナル DTD (XHTML 1.0 Transitional) が理想的な選択です (トランジショナル DTD を使用しているこのサイトも含めて)。この DTD ではプレゼンテーション層の識別子、要素、属性も使用できるため、W3C コード検証に合格することも容易になります。

2. 言語と文字セットを指定します:

ドキュメントの言語を指定してください:

ブラウザーによって正しく解釈され、W3C コード検証に合格するには、すべての XHTML ドキュメントが使用するエンコード言語を次のように宣言する必要があります。 一般的に使用される言語定義:

; 標準 XML ドキュメント言語定義:

古いブラウザの言語定義:

文字セットを改善するには「utf-8」を使用することをお勧めします。

3. スタイルシートの呼び出し:


外部スタイルシート呼び出し:

ページインライン方式：ページコードの先頭領域にスタイルシートを直接記述する。 例: