CSSの命名規則 Webサイトのデザインと基本的なフレームワーク構造

1. ウェブサイトのデザインと基本的なフレームワーク構造:

1. コンテナ
「コンテナ」は、ページ内のすべての要素をまとめてラップする部分です。この部分には、「ラッパー」、「ラップ」、「」という名前も付けられます。 page".
2. ヘッダー
"ヘッダー" は、Web サイトのページの先頭領域です。一般的に、Web サイトのロゴとその他の要素が含まれています。この部分には、「page-header」 (または pageHeader) という名前を付けることもできます。
3. Navbar
「navbar」は、水平ナビゲーション バーに相当し、最も典型的な Web ページ要素です。この部分には、「nav」、「navigation」、「nav-wrapper」という名前を付けることもできます。
4. メニュー
「Menu」領域には、一般的なリンクとメニューが含まれます。この部分には、「subNav」、「links」という名前を付けることもできます。 ","sidebar-main".
5. メイン
「メイン」はウェブサイトのメイン領域で、ブログであればログが含まれます。このセクションには、「content」、「main-content」（または「mainContent」）という名前を付けることもできます。
6. サイドバー
「サイドバー」部分には、最近更新されたコンテンツのリスト、Web サイトの紹介や広告要素など、Web サイトの二次コンテンツを含めることができます。この部分には「subNav」という名前を付けることもできます。 、「サイドパネル」、「セカンダリコンテンツ」。
7. フッター
「フッター」には、Web サイトに関する追加情報が含まれています。この部分には、「著作権」という名前を付けることもできます。

2. いくつかの注意点:

1. セマンティクスを実現するために、要素に独自の関数または「意図」の名前を付けることを検討してください。表面的な名前を使用しないでください: 赤/左/大きいなど。

2. 組み合わせの命名規則:

[要素の種類]-[要素の機能/内容]
例: 検索ボタン: btn-search
ログインフォーム: form-login
ニュースリスト: list-news
3.動作要素の名前付け:

インタラクティブな動作を伴う要素には通常、通常、ホバー、クリック、訪問などのさまざまなスタイルがあり、名前付けには次のルールを参照できます:

マウスオーバー::ホバー クリック: クリック 訪問済み: 訪問済み
例:検索ボタン: btn-search、btn-search-hover、btn-search-visited

3. よく使用される名前の概要:

ヘッダー: header

ログイン バー: loginbar

ロゴ: logo
サイドバー: サイドバー
広告バナー:バナー
ナビゲーション:nav
サブナビゲーション:subNav
メニュー:メニュー
サブメニュー:サブメニュー
ドロップダウンメニュー:dropMenu
ツールバー:ツールバー
フォーム:フォーム
列:列
矢印:矢印
検索:検索
検索ボタン: btn-search
スクロールバー:スクロール
コンテンツ:コンテンツ
タブページ:タブ
記事リスト:リスト
プロンプトメッセージ:msg
ヒント:ヒント
列タイトル:タイトル
リンク:リンク
フッター:フッター
サービス:サービス
ホットスポット:hot
ニュース:ニュース
ダウンロード:ダウンロード
登録:regsiter
ステータス:ステータス
ボタン:btn
投票:投票
パートナー:パートナー
著作権:copyright
サイトマップ: sitemap

その他の参照の命名規則

ヘッダー:ヘッダー

ログインバー:loginbar
ロゴ:ロゴ
サイドバー:サイドバー
広告:バナー
ナビゲーション:nav
サブナビゲーション:subnav
メニュー:メニュー
サブメニュー:サブメニュー
検索:検索
スクロール:スクロール
ページ本文:メイン
コンテンツ: コンテンツ
タブページ: タブ
記事リスト: リスト
プロンプトメッセージ: メッセージ
ヒント: ヒント
列タイトル: タイトル
参加: ジョイナス
ガイド: ギルド
サービス: サービス
ホット: ホット
ニュース: ニュース
ダウンロード: ダウンロード
登録 CSS IDのネーミング
ジャケット: ラップ
メインナビゲーション: mainnav
サブナビゲーション: subnav
フッター: footer
ページ全体: content
Header: header
Footer: footer
商標: ラベル
タイトル: タイトル

メインナビゲーション: mainbav (globalnav)

トップナビゲーション: topnav
サイドナビゲーション: サイドバー
左ナビゲーション: leftsidebar
右ナビゲーション: rightsidebar
フラグ: ロゴ
スローガン: バナー
メニューコンテンツ1: menu1content
メニュー容量：menucontainer
submenu：サブメニュー
サイドナビゲーションアイコン：sidebarIcon
Note：メモ
Breadcrumb：パンくずリスト（ページの場所を示すナビゲーションプロンプト）
Container：コンテナ
Content：コンテンツ
Search：検索
Login：ログイン
リボンエリア: ショップ(ショッピングカート、レジなど) 台湾)
currentcurrent

さらに、スタイルシートを編集するときに使用できるコメントは次のように記述できます:
<-- Footer -->
Content area
<-- End Footer -->

Style file names
Main master.css
Layout、layout.css
Columns.css
Text font.css
印刷スタイル print.css
Themes.css

例:
同じ開発の場合、CSS の命名キーワードは次のように設定されます:

Container :コンテナ/ボックス
ヘッダー:header
メインナビゲーション:mainNav
サブナビゲーション:subNav
トップナビゲーション:topNav
ウェブサイトのロゴ:ロゴ
大きな広告:バナー
ページの中央:mainBody
下部:フッター
メニュー:menu
メニューコンテンツ:menuContent
サブメニュー:subMenu
サブメニューコンテンツ:subMenuContent
検索:search
検索キーワード:キーワード
検索範囲:range
タグテキスト:tagTitle
タグ内容:tagContent
現在のタグ:tagCurrent/currentTag
タイトル:title
コンテンツ:content
list:list
現在位置:currentPath
sidebar:sidebar
icon:icon
note:note
login:login
register:register
列定義:column_1of3 (3 つの列のうちの最初の列)
column_2of3 (3 つの列のうちの 2 番目の列)
column_3of3 (3 つの列のうちの 3 番目の列)