共通 CSS 命名_html/css_WEB-ITnose

フロントエンド開発では、DIV+CSS の名前付けを標準的に使用すると、チームワークが強化され、開発効率が向上し、その後のページの保守と最適化に役立ちます。

1. ページ構成

ラップ：コート、パッケージ、最外層に使用されます。

ラッパー: コート、ページの周囲のレイアウト全体の幅を制御するために使用されます。

box：箱、容器。

Header: ヘッダー、ページのヘッダー部分に使用されます。

nav:ナビゲーション、メインナビゲーション。

メイン：メインエリア、メインコンテンツ。

コンテンツ/コンテナ: コンテンツ、コンテンツコンテナ。

サイドバー: サイドバー。

footer:一番下、フッター部分に使用されます。

2. 機能ブロック

左中右：左中右。

main-left: 左側のメインレイアウト。

Main-right: 右側にメインのレイアウト。

ロゴ：ウェブサイトのロゴ。

検索: 検索入力ボックス。

ログインバー: ログインバー。

regsiter: 登録モジュール。

バナー：広告、バナー広告に使用されます。

メニュー：メニュー。

サブメニュー: サブメニュー、二次メニュー。

トップ：トップ。

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

Mainnav: メインナビゲーション。

subnav: サブナビゲーション、二次ナビゲーション。

leftsideBar: 左側のナビゲーション。

rightsideBar: 右ナビゲーション。

トップバー: 上部のツール/メニュー。

下：下。

ボトムバー: 下部のツールバー。

ツール：ツールバー。

ショップ: ショッピングカートやチェックアウトカウンターなどの機能的なエリア。

3. その他の一般的な名前

title: 列のタイトル。

要約：要約。

hot: 人気のhotな情報、おすすめ。

msg: プロンプトメッセージ。

ニュース: ニュース。

リスト：リスト、記事リスト。

piclist: 画像リスト。

ニュースリスト: ニュースリスト。

search-output: 検索出力。

search-results: 検索結果。

ドロップ/ドロップダウン: ドロップダウン。

dropmenu/dorpdown-content: ドロップダウン メニュー。

スクロール：スクロール。

ホームページ：ホームページ。

サブページ: サブページ、二次ページ。

タグ：タグ。

tab: タブページ。

ヒント: ヒント。

ランキング：ランキング。

投票: 投票します。

bth: ボタン。

アイコン：アイコン。

arr/arrow: 矢印。

ステータス：ステータス。

注：注意。

スキン：皮膚。

現在：現在。

active:活動的な、効果的な。

ダウンロード: ダウンロードします。

friendLink: フレンドリーリンク。

copyright: 著作権情報。

パートナー：パートナー。

ジョイナス: 参加しましょう。

サイトマップ: ウェブサイトのマップ。

siteinfo: ウェブサイト情報。

siteinfoLegar: 法的記述。

発表：発表。

ギルド：ガイド。

サービス：サービス。

プロモーション：昇進。

ブログ：ブログ。

フォーラム：フォーラム。

4. 製品関連のネーミング

キーワード：キーワード。

製品：製品。

products-price: 製品の価格。

products-description: 製品の説明。

products-review: 製品のレビュー。

edi​​tor-review: 編集者のレビュー。

news-products: 最新の製品。

出版社：メーカー。

スクリーンショット: サムネイル。

faq: よくある質問。

バーディング：商標。

支払い：リチャージ。

評判：評判。用5、よく使われるファイル命名

グローバルスタイル: global.css

レイアウト構造:layout.css

基本共有: Base.css

総合スタイル: style.css

メイン: master.css

モジュール: module.css

フォーム: Forms.css

テーマ/ウェブページスキニング: Strategies.css

フォント: font.css

印刷: print.css

パッチ: mend.css

プライベートスタイル/独立したページ、実際の状況に応じて、CSS ファイルの名前をカスタマイズできます。

上記の一般的に使用されるファイル名をすべて使用する必要はありません。実際の状況によれば、各ページは 3 つまでの CSS ファイルを参照する必要があります。

6. ID とクラスの命名規則

(1). メインボックス、重要ボックス、特別ボックス、および最外ボックスには ID 属性が付けられ、その他のボックスにはクラス属性が付けられます。

(2) 命名ルールは内容を優先し、性能で補完しなければなりません。まず、提示する内容と機能に応じて名前を付けます。コンテンツに適切な名前が見つからない場合は、パフォーマンスに応じて名前を付けることができます。

(3) ほとんどの場合、名前には英語の単語が使用されます。これにより、コードの読みやすさが向上し、後のページのメンテナンスと最適化が容易になります。ただし、適切な単語が見つからない特殊な場合があります。名前にはピンインを使用できますが、簡潔で明確な構造にする必要があります。

(4) ID とクラス名は、可能な限りすべて小文字にする必要があります。複数の単語をハイフン (-) でつなぐことはできますが、数字で始めることはできません。

(5). 名前付けには略語を使用できますが、それが有効な略語であること、つまり他の人が理解できるものであることを確認する必要があり、略語をカスタマイズすることはできません。