HTML の CSS および DIV 命名規則、pages_html/css_WEB-ITnose

CSS命名規則

Head: header

Content: content/containe

Tail: footer

Navigation: nav

Sidebar: sidebar

Column: column

ページ周辺制御全体のレイアウト幅: ラッパー

credcred

サブナビゲーション: subnav

メニュー: menu

サブメニュー: submenu

検索: search

フレンドリーリンク: friendslink

フッター: footer

著作権: copyright

スクロール: スクロール

：content

タグページ:tab

記事一覧:list

Tips:tips

コラムタイトル:title

参加:joinus

ガイド:ギルド

サービス:service

登録:regsiter

ステータス:status

投票: 投票

パートナー: パートナー

XHTML ファイル内の ID の命名

(1) ページ構造

コンテナ: コンテナ

ヘッダー: header

コンテンツ: content/container

ページ本体: main

タオル: FOOTER f

ナビゲーション: NAV

页: Sidebar

column: column

全体のレイアウト幅のページ周辺制御:wrapper

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

サブナビゲーション: subnav

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

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

左ナビゲーション: leftsidebar

右ナビゲーション: rightsidebar

メニュー: menu

サブメニュー: submenu

タイトル: title

loglogue: logo

Advertising: Banner

sinceleg in by in by: regsiter

>>検索：検索

リボン領域：Shop

intin in inuner：current：current

tips：tips

アイコン：アイコン

アイコン注：メモ

ガイド：ギルド

サービス：サービス

ホットスポット：ホット：ホット

ニュース: ニュース

ダウンロード: ダウンロード

投票: 投票

パートナー: パートナー

フレンドリーリンク: link

著作権: copyright

CSS+DIV 命名規則:

ログインバー:loginBar

ロゴ:logo

サイドバー:sideBar

広告:banner

ナビゲーション:nav

サブナビゲーション:subNav

メニュー:menu

サブメニュー:subMenu

検索:search

スクロール:scroll

ページ本文:main

コンテンツ: content

タグページ: tab

記事リスト: list

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

ちょっとしたヒント: Tips

コラムタイトル: title

フレンドリーリンク: friendsLink

フッター: footer

参加: joinus

ガイド: guild

サービス: service

ホットスポット: hot

ニュース: news

ダウンロード: download

登録: regsiter

ステータス: status

ボタン: btn

投票: Vote

著作権: copyRight

1. CSSIDのネーミング

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

サブナビゲーション: subnav

フッター: footer

全ページ: content

page Eyebrow: header

Footer: footer

Trademark: label

Title: title

メインナビゲーション: mainNav(globalNav)

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

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

左ナビゲーション: leftsideBar

右ナビゲーション: rightsideBar

フラグ: ロゴ

スローガン: バナー

メニューコンテンツ 1: menu1Content

メニュー容量: menuContainer

サブメニュー: submenu

サイドナビゲーションアイコン: SidebarIcon

コメント: note

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

コンテナ:container

コンテンツ:content

検索:search
ログイン:login
リボン:ショップ(ショッピングカート、レジカウンターなど)
現在のカレント

2. スタイルファイルの命名
メイン:master.css
レイアウト:layout.css
列:columns.css
テキスト:font.css
印刷スタイル:print.css
テーマ:主題.css

説明:All If itはクラスなので拡張する必要がある場合は、現在の名前に「_」 (アンダースコア) 接尾辞を付けて名前をカスタマイズします。私は、リストページをリスト、ニュースリストをニュースリスト、写真リストをピクリスト、コンテンツページをビュー、
/**/
大きなフレーム全体: #wrapper
大きなフレーム内: #inwrapper
///////////////////////////////// //// //////////////////////////////////////////// /////// /////////////////////
トップとバナー: .top
トップと内側のバナー: .intop
ロゴ: .logo
バナー: .banner
ナビゲーション:. menu
ナビゲーション: .inmenu
.Menuul
.Menuul li
.Menuul li a
ドロップダウン メニュー: .inmenu_xialaul
.Inmenu_xialaul
.Inmenu_xiala ul li
.Inmenu_xialaul li a
// /////////// ////////////////////////////////////// ////////////// /////////////////////////////////// ////////////
メインコンテンツ:.mainWrapper
メインコンテンツ内:.inmainwrapper
左サイドバー:.sideleft
左サイド内:.insideleft
右列:.sideright
右側: .insideright
真ん中: .sidecenter
真ん中の内側: .insidecenter
// //////////////////////////////// ///////////////////////////////////////////////// /////////////////////// ////////
ボトム: .foot
内側ボトム: .infoot
/////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////
/*その他のネーミング*/
検索: .search
検索内: .insearch と呼ぶことに慣れています。
検索バー: .searchselect
検索ボタン: .serachbuttom
入力テキストボックス: .input
.select

/*表のスタイル*/

表の全体枠: .listbox

表の幅: .listbox-table
テーブルヘッダーのテキストスタイル:. listbox-header
テーブルテキストスタイル: .listbox-entry
/*Universal*/
Universal: .GM/*これはちょっと憂鬱です、英語が下手すぎます...*/
Universal: 。 INGM
ユニバーサル左フロート: .GMfl(GM FLOAT LEFT)
ユニバーサル右フロート: .GMfr(GM FLOAT RIGHT)
/*ユニバーサルピクチャスタイル*/
ユニバーサルピクチャスタイル: .img
/*クリアフロート*/
すべてクリアフロート: .clear
左側のクリアフロート: .clearleft
右側のクリアフロート: .clearright
/*テキストスタイル*/
テキスト: .font
/*ニュースリスト*/
ニュースリスト: .fontnews
/*ページのフォント スタイル*/
ページのフォント スタイルを表示: .fontview

商標: label

title: title
メイン ナビゲーション: mainbav (globalnav) トップ ナビゲーション: topnav サイド ナビゲーション: サイドバー
左ナビゲーション: leftsidebar
右ナビゲーション: rightsidebar
フラグ: ロゴ
スローガン: バナー
メニューコンテンツ 1: menu1 コンテンツ
メニュー容量: メニューコンテナ
サブメニュー: サブメニュー
サイドナビゲーションアイコン: サイドバーアイコン
注: note
ブレッドクラム: ブレッドクラム (つまり、ページの場所のナビゲーションプロンプト)
コンテナ:コンテナ
コンテンツ: コンテンツ
検索: 検索
ログイン: ログイン
リボン: ショップ (ショッピング カート、チェックアウトなど)
現在の
マストヘッド: マストヘッド
要約、要約、概要、または一般
左側にフローティング写真 photoleft
右側にフローティング写真写真右
タイトルタイトル
エントリー下エントリー下
拡張または.もっと見る
コンテナ背景コンテナbg
サービスサービス
サービスリンクサービスリンク
ライン
テキストテキスト
右側
著作権
ニュースニュース
ブックカバーラッパー
イントロパート1
コラム
パス
section
modulemodule
navigation subnav
2. さらに、スタイルシートを編集するときに使用できるコメントは次のように記述できます:
<-- Footer -->
content area
< -- End Footer -- >

3. スタイルファイルの名前付け

main master.css
layout、layout.css

columns.css

text font.css

print style print.css

主題.css

4. スタイルシートの注釈
例1
/* グローバル --------------------------- */
/* リンク ------------ ----------------- */

/* フォーム ------------------ --------- - */

/* IDS ------------------------ */
/* ヘッダー - --------- --------------- */
/* コラム 1 --------------- ---------- * /
/* 列 2 ---------------------------- */
/* クラス ---------- ------------------- */

例 2

HTML

例 3 (NetEase)

CSS
#UrsLogin
#LogoNav
#Column
#Content1
#bNav
#Copyright
#UrsLogin
#LogoNav
#SearchArea
#ChannelArea
#HotNews
#New sCenter
.キーワード
# MallArea
#city
#aboutus

…………………………
一般的な命名

ラッパーとコンテナを含む
ヘッダーまたはhdと省略形
フッターまたはftと省略形
ナビゲーションnav
現在地のパンくずリスト
二次ナビゲーションsub_nav
サイドバーまたはサイドカラム
モジュール module

データベースの命名規則

データベースには文字規則が含まれます

26 個の英字 (大文字と小文字を区別) と 0 ～ 9 の 10 個の自然数を使用し、アンダースコア _ で構成され、合計63文字。他の文字 (コメントを除く) は表示されません。

データベース オブジェクトの命名規則

データベース オブジェクトには、テーブル、ビュー (クエリ)、ストアド プロシージャ (パラメータ クエリ)、関数、および制約が含まれます。オブジェクト名はプレフィックスと実際の名前で構成され、長さは 30 文字を超えません。接頭辞: 小文字を使用します。

例: table-tb view-vi ストアド プロシージャ-sp function-fn

実際の名前

実際の名前は、エンティティの内容を説明するように努め、単語または単語の組み合わせで構成する必要があります。 word は大文字で、他の文字は小文字で始まります。

例: テーブル User_Info ビュー UserList ストアド プロシージャ UserDelete

したがって、有効なオブジェクト名は次のようになります。

テーブル tbUser_Info、tbMessage_Detail

View vi_MessageList

ストアド プロシージャ sp_MessageAdd

データベース テーブルの命名規則

フィールドはプレフィックスと実際の名前で構成されます。システムは、実際の名前の最初の単語と同じ単語を使用しようとします。

接頭語: テーブルを表すには小文字の tb を使用します。

例: tbMember tbMember_Info tbForum_Board tbForum_Thread1

フィールドの命名規則

数値、文字、日付/時刻、LOB(ラージオブジェクト)、その他、フィールドはテーブルの略称、アンダースコア、実際の名前に加えてサフィックス。

サフィックス: フィールドの属性を表すには小文字を使用します。

例: User_Idint User_Namestr User_RegDatedtm

命名規則の表示

フィールドはプレフィックスと実際の名前で構成され、中央のアンダースコアで接続されています。

接頭辞: ビューを表すには小文字の vi を使用します。

例: vi_User vi_UserInfo

ストアドプロシージャの命名規則

フィールドはプレフィックスと実際の名前で構成され、中央のアンダースコアで接続されています。
接頭辞: ストアド プロシージャを示すには、小文字の sp を使用します。
例: sp_User

データベース設計ドキュメントのルール

すべてのデータベース設計はドキュメントで記述する必要があり、ドキュメントはモジュール形式で表現されます。一般的な形式は次のとおりです。

----------------------------------------------------- -------- ' テーブル名：tbUser_Info

具体的な内容：

UserId int、自動インクリメントユーザーコード

UserName char(12) ユーザー名

...

------ --------------- ----------------------------

CSSクラスとIDの命名規則

Web開発者が作成できるCSS クラス名と ID 名を使用し、これらの名前を使用して div やその他の形式のページ要素に名前を付けて識別します。開発者にとって、XHTML タグ (タグ) を再定義する CSS セレクターに名前を付けるときは、定義済みのタグと正確に一致することを確認する必要がありますが、クラスおよび ID セレクターの名前に関しては、意見が分かれます。ただし、これらのクラスや ID に好きなように名前を付けるのは良い習慣ではありません。

1. 直感的な名前付け

Web ページをデザインし、div を識別する必要がある場合、最も自然なアイデアは、ページ上の要素の位置を説明できる単語を使用して名前を付けることです。

例: top-panel

horizo​​ntal-nav

left-side

center-column

right-col

これらは、CSSおよびXHTMLのクラスとIDの有効な命名方法です。これらの用語はシンプルで説明的であるため、ページ要素とそれに対応する CSS スタイルを識別する必要性に対応します。

しかし、問題は、そのような名前がページコンテンツの特定の表現に関連付けられていることです。これらの名前は、特定のページ レイアウト内のページ要素の位置を参照するため、そのようなレイアウト外で使用すると不適切であるか、混乱を招く可能性さえあります。これらの名前は、ドキュメントの内容の構造とは関係ありません。したがって、CSS クラスと ID に名前を付けるより良い方法を次に示します。

2. 構造化された名前付け

これらは、CSS および XHTML のクラスと ID に名前を付ける有効な方法です。これらの用語はシンプルで説明的であるため、ページ要素とそれに対応する CSS スタイルを識別する必要性に対応します。 これらは、CSS および XHTML のクラスと ID に名前を付ける有効な方法です。これらの用語はシンプルで説明的であるため、ページ要素とそれに対応する CSS スタイルを識別する必要性に対応します。

タグ付けされた関連情報は、文書の外観ではなく構造を説明するために使用されます。この機能を使用すると、CSS を変更するだけで、コンテンツとマークアップをさまざまな外観形式で再利用できます。この方法を理解すると、オーディオなどの外観形式を扱う場合、ページ位置を使用してクラスや ID に名前を付けるのは非常に不適切であることが簡単にわかります。したがって、クラスと ID は、出現する場所ではなく、ドキュメント内の目的に基づいて構造化され、名前が付けられる必要があります。

以下に示すように、構造化された方法でクラスと ID 名に名前を付けることができます:

例: branding

main-nav

subnav

main-content

sidebar

これらの名前は、命名方法と同じくらい直感的です理解しやすいですが、ページ要素の位置ではなく役割を説明しています。これにより、コードは純粋な構造マークアップを使用するという本来の目的とより一貫性のあるものになります。つまり、開発者はマークアップを変更せずにさまざまなメディアの表示形式を処理できるようになります。

他のメディアで Web ページをフォーマットする予定がない場合でも、構造化された名前を使用すると、将来のサイトのアップグレードや再設計が容易になります。たとえば、構造化された名前付けにより、右列に同じ ID を持つ div がページの左側に移動された場合の混乱が回避されます。この方法で div サイドバーに名前を付けるのは、ページのどちらの側に表示されても、名前が開発者にとって直感的で理解しやすいため、より適切です。

3. 規約

Andy Clarke は、標準化された Web デザイン概念を提唱する開発者によって設計された 40 の Web サイトのソース コードを分析しました。クラス名と ID 名は非常に一貫性がありませんが、頻繁に現れるいくつかの一般的な名前がまだ見つかります。最も一般的に使用されるクラス/ID 名のリストの例を次に示します。

例: header

content

nav

sidebar

footer

3. メンバーベースの命名規則
を参照します。ファイルに続いて、フォルダーの所属が分類によって名前付けされます。これにより、ファイルの配置がより論理的になります。例: マウスをクリックする前の画像ファイルは「file_on」であり、クリック後の画像ファイルは「」になります。

4. 属性ベースの命名規則

例: 装飾的な小さな画像は、「<画像内容の説明>_<カラー>_<画像サイズ>_<シリアル番号>」の後に続きます。 .*」で表します。これは「heart_red_401*334_1.jpg」です

5. 序数に基づく命名規則

Web ページでは、画像のダウンロード時間を短縮するために、画像を小さな部分に分割するのが一般的です。このとき、2 次元配列を使用して名前を付けることができます。
例:

この画像は "donghua_11.jpg" です

この画像は "donghua_12.jpg" です。
この写真は「donghua_22.jpg」です

これらは写真を形成します

6. 列挙に基づく命名規則

最初のものは本の側面の「ddd_cemian.jpg」です

2番目は本の表紙です。それは「ddd_fengpi.jpg」です。

3番目は本の裏表紙にある「ddd_fengdi.jpg」です

ウェブサイトにはさまざまなサイズの写真もあります。ユーザーの希望に従って表示されます。

例: "ddd_cemian_401*334 .jpg" および "ddd_cemian_1024*768.jpg"

これらは、Web サイトを構築する際の参考用です。

コードの競合を避けるため (これにより、コードの汎用性が高くなります)、命名規則を使用する必要があります。これは非常に重要な良いプログラミング習慣です。さて、ここで一般的に使用されるルールをいくつか紹介します。

◆変数、メソッド、プロパティに名前を付けます

変数、メソッド、プロパティの名前の最初の文字は大文字にし、その名前はその目的 (または意味) を表現する必要があります。

変数

.NET 命名

ハンガリー語命名

説明

Cstring

EmployeeName
szName
従業員の名前

Int

AttendanceCounter
nCounter
long 型のカウンター
Long

NumberOfBy tes

lBytes
long 型変数にはバイトが格納されます。

定義でアンダースコア「_」を使用することに慣れている場合があります。たとえば、Add_Data(int a, int b) によれば、これは良いプログラミング習慣ではありません。間違っていません 。 Add_Data の定義を AddData に変更する必要があります。 これらは Microsoft の標準ではないため、これらのルールに従う必要はありません。ただし、いくつかの場所では、これらの法律の理論的根拠を以下で理解できるでしょう。

個人的には、ハンガリー語の命名法が好きです。もちろん、同じルールが変数にも適用されます。ハンガリー語の命名法を覚えていると、ブール変数の定義は次のように「b」で始まります。

BOOL bFlag = TRUE;

新しい法律では、Flag と「b」の使用は推奨されません。

bool IsFileFound = true ;

MSDN を参照すると、新しいルールに関する詳細な説明が記載されています。

◆コンポーネントとアセンブリに名前を付ける

コードの競合を避けるために、命名規則に従ってライブラリ (.NET ではアセンブリと呼ばれます) に名前を付けることは、プログラミングの良い習慣です。あなたが MindCracker 社に所属しており、C# データベース クラスを拡張するためのライブラリを開発しているとします。MyAssembly.Database.ADOSet よりも MindCracker.DatabaseAssembly.ADOSet という名前を付ける方がはるかに適切です。

ライブラリにテーブルからデータを読み取り、データセットを返すメソッドがあると再び仮定します。 DataSet return_data() という名前を付けた場合は、DataSet ReturnData() に変更します。

名前付けの語順も統一する必要があります。たとえば、Employee と Manager という 2 つのテーブルがあり、それぞれのテーブルにレコードを挿入するメソッドを定義する場合、メソッド名 AppendEmployee および AppendManager は AppendEmployee および ManagerAppend よりも優れています。
ブロック構造とネストされたブロック構造を理解するのが簡単なため、私は 2 つの方法を好みます。

◆ハンガリー語命名法 (efoxxx 添付)

ハンガリー語命名法はハンガリー人のプログラマーによって発明され、彼はマイクロソフトで長年働いてきました。この命名法は、さまざまな Microsoft 製品およびドキュメントを通じて広まっています。ほとんどの経験豊富なプログラマーは、使用する言語に関係なく、多かれ少なかれそれを使用します

この命名法の基本原則は次のとおりです:

変数名 = 属性 + 型 + オブジェクトの説明

つまり、変数名は 3 つの情報部分で構成されます。こうすることで、プログラマは変数の型と目的を簡単に理解でき、覚えやすくなります。

以下に推奨ルールの例をいくつか示します。これらを選択して使用することも、個人の好みに応じて変更することもできます。 ： 部分⑴ 属性部:

グローバル変数: G_

定数: C_

クラスメンバ変数: m_

型部:

ポインタ: P

: H

ブール型: B

浮動小数点型: f

符号なし: u

⑶記述部:

初期化: Init

一時変数: Tmp

宛先オブジェクト: Dst

ソースオブジェクト: Src

ウィンドウ: Wnd

ハンガリー語命名法が導入されます。以下の例では、これと上記のコーディング スタイルに準拠するよう最善を尽くします。繰り返しになりますが、すべての読者がこの規約に従う必要があるわけではありませんが、現代のソフトウェア開発者としての読者にはこの規約を遵守していただきたいと考えています。

a Array Array Array

b BOOL (int) Boolean (integer)

by Unsigned Char (Byte) 符号なし文字 (バイト)

c Char バイト数

cr カラー基準値颜色(参考)值

cx xの数 (短い) xの集合(短整数)

dw DWORD (符号なし長い) 双字(無記号长整数)

f フラグ (通常は複数のビット値) ) フラグ (通常は複数桁の値)

fn関数

関数

g_ global

h Handle ハンドル

i Integer Integer

l Long ポインター Long ポインター

m_ クラスのデータメンバー クラスのデータメンバー

n Short int Short integer

p Pointer ポインター

s文字列

sz ゼロで終了する文字列 0 で終わる文字列

tm テキスト メトリック テキスト ルール

u Unsigned int 符号なし整数 signed long (ULONG) 符号なし long 整数

w WORD (unsigned short) 記号短整数

x,y x 、y 座標 (短い) 坐标值/短整数

v void 空

下边举例说明：

hwnd：句柄，wnd 表示窗口， これらを合わせて「ウィンドウハンドル」となります。

m_bFlag: m はメンバー変数を表し、b はブール値を表します。これらは合わせて、「特定のクラスのブール型のメンバー変数はステータス フラグである」ことを意味します。

C# .net 命名規則

適切な命名規則を見つけるのは非常に難しいため、自分で保持することをお勧めします

1 ADO.NET 命名規則 データ型の略称 標準命名例
Connection con con Northwind
Command cmd cmdReturnProducts
Parameter parmProductID
DataAdapter god godProducts
DataReader dtr dtrProducts
DataSet dstNorthWind
DataTable dtblProduct
DataRow drow drow Row98
DataColumn dcol dcolProductID drel 命名規則

データ型 データ型の略語 標準的な命名例 lbl
LinkLabel llbl llblToday
Button使用するPictureBox picImage DataGrid DGRD DGRDView
Listbox lstproducts
CheckedListBox clstchecked
コンボボックス CBO CBOMENU
ListView Lvwbrowser
TreeView TVWType RTabControl TCTLSELECTED
DateTimePicker DTPSTATDATDATE
HSCROLLLBAAR HSBIMAGE
VSCROLLLLLLAMBAGE
タイマー TMRCount
St iLStimage
ツールバー TLB TLBMANAGE atStatusbar STBFOOTPRINT
openfileedialog odlg odlgfiledata dataタイプデータ型略語標準命名例​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ハイパーリンク LNK LNKDETAILS

画像 IMG Imgauntbetty
画像ボタン IBTNSUBMIT
ラベル LBL LBLResults
LinkBut​​ton LBTNSUBMITBMITBOX LSTCO Untries anPanel PNL PNLFORM2
Placeholder PlhformContents
Radiobutton Rad Female
RadiobuttonList Radlgender
RangEvalidator Valgage XRegialXPression Valeemail_validator
Repeater RPT RPTQueryResults
RequiredFieldValidator ValrfirstName
Table tbl tbl CountryCodes
TableCell tblc tblcGermany
TableRow tblr tblrCount py TechnologyName
このようにすると、表示される名前空間は次のようになります。
注：これはあくまで原則です。サードパーティ企業は別の名前を選択する場合があります。
会社名やその他の有名なブランドの名前を名前空間の接頭辞として使用することは避けてください。これにより、公開された 2 つの名前空間が同じ名前を持つ可能性が生じます。

例: Microsoft が提供する Office 自動クラスに Microsoft.Office という名前を付けます

Pascal の大文字と小文字を使用し、論理コンポーネントを区切るにはカンマを使用します。

例: Microsoft.Office.PowerPoint

ブランドが従来とは異なる大文字化を使用している場合は、通常の名前空間の大文字化ルールから逸脱している場合でも、必ずブランドによって決定された大文字化に従ってください。
例: NeXT.WebObjects
ee.cummings

クラスとクラスコンポーネントの命名

クラスの命名原則は、クラスに名詞または名詞句を付け、Pascal の大文字化を使用することです。クラス名での略語の使用を減らします。クラス接頭辞 (C など) や下線付き文字は使用しないでください。
例: public class FileStream {}

public class Button {}

public class String {}

CSS クラスと ID の一般的な名前:

Web サイトのヘッダー: head/header (head) top (トップ) ナビゲーション: nanv ナビゲーションは特に区別されます: topnav (トップ ナビゲーション)、mainnav (メイン ナビゲーション)、mininav (ミニ ナビゲーション)、textnav (ナビゲーション テキスト)、subnav (サブ ナビゲーション/セカンダリ ナビゲーション)
旗、広告、商標: ロゴ(フラグ)、ブランド(商標)、バナー(スローガン)
検索: sreach (検索)、sreachbox (検索ボックス)、sreachbtn (検索ボタン)、sreachinput (検索入力ボックス)
登録とログイン: login (ログイン)、regsiter (登録)、ユーザーボックス (ユーザー名/パス用のテキストボックス)、パスワード (パスワード)

レイアウト、列とボックス: レイアウト (レイアウト)、bigdiv (大きな div)、leftdiv (左の列)、rightdiv (右の列) 列)、 leftfloat (左フローティング)、rightfloat (右フローティング)、メインボックス ()、サブページ (サブページ/二次ページ)

フッター/ボトム: フット/フッター (フッター/ボトム)、著作権 (著作権情報)、サイトマップ

その他: コンテンツ、スキン、タイトル、フロム、写真、ニュース、ショップ、リスト、ニュースリスト (ニュース リスト)、ダウンロードリスト (ダウンロード リスト)、ピクリスト (画像リスト)、dropmenv (ドロップダウン メニュー)、cor/corner (角丸)、ホームページ (ホーム) page)、crumb(現在地ナビ)

実際、上記のIDは名前をつけるときに大文字と小文字、_を区別することが多いです。例えば、メインナビゲーションはMainNav_1、MainNav_2です。 、など。 「型 + 変数名」ルールを使用して名前を付けることもできます。たとえば、赤いフォントでクラスを記述するには、

.f_red {} (f は font の略称) とします。つまり、大文字、_、および略語を使用すると、コードの可読性が大幅に向上するという原則があります。

また、私は子 divd に in + 親 div という名前を付ける "in" の書き方をよく使います。これにより、前に名前を付けた後、次の div に名前を付ける方法が分からなくなるという事態を避けることができます。たとえば、intop、inbox、infrom、inlogin などです。