div+css ページの一般的な命名規則のリスト design_html/css_WEB-ITnose

あらゆるコードプログラミングには、独自の特徴を持つ共通の命名規則があり、div+css ページデザインも例外ではありません。一般的に使用される CSS 命名規則に準拠すると、コードのアップグレードや拡張が容易になるだけでなく、他の人が CSS コードを理解できるようになり、ページが明確で整理されたものになります。

cssファイル名の命名規則

モジュール：module.css 基本共通：base.css レイアウト、レイアウト：layout.css テーマ：themes.css カラム：columns.css テキスト：font.css フォーム：forms.css パッチ：mend. css印刷: print.css

ページ構造要素 div 命名規則

ヘッダー: header コンテンツ: コンテンツ/コンテナー テール: フッター ナビゲーション: nav サイドバー: サイドバー カラム: コラム ページ周辺コントロール全体のレイアウト幅: ラッパー 左右中央: 左右中央 ログインバー: ログインバー ロゴ: ロゴ 広告: バナー ページ本文: メイン ホットスポット: ホット ニュース: ニュース ダウンロード: ダウンロード サブナビゲーション: subnav メニュー: メニュー サブメニュー: サブメニュー 検索: 検索 フレンドリー リンク: フレンドリンク フッター: フッター 著作権: copyright スクロール: スクロール コンテンツ: コンテンツ タグ ページ: タブ 記事リスト: リスト プロンプト情報: msg ヒント: ヒント 列タイトル: タイトル 参加: joinus ガイド: ギルド サービス: サービス 登録: regsiter ステータス: ステータス 投票: 投票 パートナー: パートナー

色のネーミング - 用途色の名前または 16 進コード

.red {color: red;} .f60 {color: #f60;} .ff8600 {color: #ff8600;}

フォント サイズの名前付け - 「フォント + フォント サイズ」を名前として直接使用します

.font12px {font-size: 12px;} .font9pt {font-size: 9pt;}

配置スタイルの命名 - 配置ターゲットの英語名を使用します

.left {float:left;} .bottom {float:bottom;}

タイトル バー スタイルの名前付け - 「カテゴリ + 関数」メソッドを使用して名前を付けます

.barnews { } .barproduct { }

コメントの記述仕様

1. 行間コメント - 属性値の直後に記述します (例:

.search)。 {
border:1px Solid #fff;/*検索入力ボックスの境界線を定義します*/
background:url(../images/icon.gif) no-report #333;/*検索ボックスの背景を定義します*/
}

2 . コメント全体 - 次のようなコメントを最初と最後に追加します:

/*======検索バー=====*/
.search {
border:1px Solid #fff ;
background:url (../images/icon.gif) no-repeat #333;
}
/*=====検索バーの終わり======*/

上記はdiv+css ページ デザインについてまとめました。 一般的に使用される命名規則であり、誰もが毎日のページ デザインで標準化された命名を行う良い習慣を徐々に身につけるべきです。

出典: csscss.org