よく使用される CSS 命名規則のまとめ、非常に実用的 (コレクション)

CSS の名前付けは、小文字の英単語または組み合わせで名前が付けられ、単語は "-" で接続されます。一般的に使用される CSS の名前付け仕様には、テキストの名前付け仕様、ページ構造の名前付け仕様、ナビゲーションの名前付け、および関数の名前付けが含まれます。

CSS の名前付けでは、通常、小文字の英単語または名前の組み合わせが使用され、単語は「-」で区切られ、一目で理解できる簡単な単語以外は省略されません。次に、CSS で一般的に使用される命名規則を記事内でいくつか紹介します。皆様のお役に立てれば幸いです。

[推奨コース: CSS チュートリアル]

テキストの命名規則

index.css: 通常、スタイルの作成に使用されます。ホーム ページの

head.css: ヘッド スタイル。複数のページ ヘッダーが同じデザイン スタイルを持つ場合に使用されます。

base.css: 共有スタイル。

style.css: 独立したページで使用されるスタイル ファイル。

global.css: ページ スタイルの基礎となるグローバル パブリック スタイル。ページに含める必要があります。

layout.css: レイアウト、レイアウト スタイル。一般的なタイプが多数ある場合に使用され、一般にホームページ ページと製品ページで使用されます。

module.css: モジュール。製品ページに使用されます。他のスタイルと一緒に使用できます。

master.css: メイン スタイル シート

columns.css: 列スタイル

themes.css: メイン スタイル

forms.css: フォーム スタイル

mend.css: パッチ、上記のスタイルに基づいた非公開化パッチ。

ページ構造の名前:

page: ページ全体を表し、最も外側のレイヤーに使用されます。

wrap: coat、すべての要素をまとめてラップする周辺パッケージ。最外層に使用されます。

wrapper: ページ周辺機器全体のレイアウト幅を制御します。最外層に使用されます。

コンテナ: コンテナ全体、最も外側の

head に使用、ヘッダー: ヘッダー領域、ヘッダーに使用

nav: ナビゲーション バー

content: コンテンツ、最も重要Web サイトのコンテンツ領域。Web ページの中央の本文に使用されます。

main: Web サイトのメイン領域 (最も重要な位置を示します)。中央のメイン コンテンツに使用されます。

列: 列

サイドバー: サイドバー

フッター、フッター: フッター、フッター。 Web サイト上の一部の追加情報配置領域 (または名前付き著作権) は下部で使用されます。

ナビゲーションの名前付け:

nav、navbar、navigation、nav-wrapper:ナビゲーション バーまたはナビゲーション パッケージ。水平ナビゲーションを表します。

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

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

subnav: サブ ナビゲーション

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

leftsidebar または sidebar_a: 左側のナビゲーション

rightsidebar または sidebar_b: 右のナビゲーション

title: タイトル

summary: 概要

menu:メニュー、領域には一般リンクとメニューが含まれます

submenu: サブメニュー

drop: ドロップダウン

dorpmenu: ドロップダウン メニュー

links: リンク メニュー

関数の名前:

logo: Web サイトのロゴをマークします

banner: スローガン、広告バナー、トップ広告バナー

login : ログイン、(ログイン フォーム: form-login など)

loginbar: ログイン バー

register: 登録

tool、ツールバー: ツールバー

search : search

searchbar: 検索バー

searchlnput: 検索入力ボックス

shop: 現在のリボンを示します

#icon: 小さなアイコン

label: 商標

homepage：ホームページ

subpage：第 2 レベルのページのサブページ

hot：ホット スポット

list：記事リスト、(例: ニュース リスト: list -news)

scroll: スクロール

tab: タグ

sitemap: サイト マップ

msg または message: プロンプト メッセージ

current : 現在の

joinus: 参加

status: ステータス

btn: ボタン (例: 検索ボタンは次のように記述できます: btn -search)

tips : ヒント

note: メモ

ギルド: ガイド

arr、矢印: マーク矢印

サービス:サービス

ブレッドクラム: (つまり、ページの場所のナビゲーション プロンプト)

download:ダウンロード

vote:投票

siteinfo:Web サイト情報

partner：パートナー

link, friendslink：フレンドリーリンク

copyright：著作権情報

siteinfoCredits：クレジット

siteinfoLegal：法的情報