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
>>検索：検索
リボン領域：Shopintin 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
全ページ: contentpage Eyebrow: header
Footer: footerTrademark: 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-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
title: title
メイン ナビゲーション: mainbav (globalnav) トップ ナビゲーション: topnav サイド ナビゲーション: サイドバー
左ナビゲーション: leftsidebar
右ナビゲーション: rightsidebar
フラグ: ロゴ
スローガン: バナー
メニューコンテンツ 1: menu1 コンテンツ
メニュー容量: メニューコンテナ
サブメニュー: サブメニュー
サイドナビゲーションアイコン: サイドバーアイコン
注: note
ブレッドクラム: ブレッドクラム (つまり、ページの場所のナビゲーションプロンプト)
コンテナ:コンテナ
コンテンツ: コンテンツ
検索: 検索
ログイン: ログイン
リボン: ショップ (ショッピング カート、チェックアウトなど)
現在の
マストヘッド: マストヘッド
要約、要約、概要、または一般
左側にフローティング写真 photoleft
右側にフローティング写真写真右
タイトルタイトル
エントリー下エントリー下
拡張または.もっと見る
コンテナ背景コンテナbg
サービスサービス
サービスリンクサービスリンク
ライン
テキストテキスト
右側
著作権
ニュースニュース
ブックカバーラッパー
イントロパート1
コラム
パス
section
modulemodule
navigation subnav
2. さらに、スタイルシートを編集するときに使用できるコメントは次のように記述できます:
<-- Footer -->
content area
< -- End Footer -- >
main master.css
layout、layout.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
horizontal-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」であり、クリック後の画像ファイルは「」になります。
例: 装飾的な小さな画像は、「<画像内容の説明>_<カラー>_<画像サイズ>_<シリアル番号>」の後に続きます。 .*」で表します。これは「heart_red_401*334_1.jpg」です
Web ページでは、画像のダウンロード時間を短縮するために、画像を小さな部分に分割するのが一般的です。このとき、2 次元配列を使用して名前を付けることができます。
例:
この画像は "donghua_12.jpg" です。
この写真は「donghua_22.jpg」です
これらは写真を形成します
6. 列挙に基づく命名規則
2番目は本の表紙です。それは「ddd_fengpi.jpg」です。
3番目は本の裏表紙にある「ddd_fengdi.jpg」ですウェブサイトにはさまざまなサイズの写真もあります。ユーザーの希望に従って表示されます。
例: "ddd_cemian_401*334 .jpg" および "ddd_cemian_1024*768.jpg"
コードの競合を避けるため (これにより、コードの汎用性が高くなります)、命名規則を使用する必要があります。これは非常に重要な良いプログラミング習慣です。さて、ここで一般的に使用されるルールをいくつか紹介します。
◆変数、メソッド、プロパティに名前を付けます
変数、メソッド、プロパティの名前の最初の文字は大文字にし、その名前はその目的 (または意味) を表現する必要があります。
変数
.NET 命名ハンガリー語命名
説明Cstring
EmployeeName
szName
従業員の名前
AttendanceCounter
nCounter
long 型のカウンター
Long
lBytes
long 型変数にはバイトが格納されます。
個人的には、ハンガリー語の命名法が好きです。もちろん、同じルールが変数にも適用されます。ハンガリー語の命名法を覚えていると、ブール変数の定義は次のように「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
LinkButton 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 つの名前空間が同じ名前を持つ可能性が生じます。
Pascal の大文字と小文字を使用し、論理コンポーネントを区切るにはカンマを使用します。
例: Microsoft.Office.PowerPoint
ブランドが従来とは異なる大文字化を使用している場合は、通常の名前空間の大文字化ルールから逸脱している場合でも、必ずブランドによって決定された大文字化に従ってください。
例: NeXT.WebObjects
ee.cummings
クラスの命名原則は、クラスに名詞または名詞句を付け、Pascal の大文字化を使用することです。クラス名での略語の使用を減らします。クラス接頭辞 (C など) や下線付き文字は使用しないでください。
例: public class FileStream {}
public class String {}
CSS クラスと ID の一般的な名前:
Web サイトのヘッダー: head/header (head) top (トップ) ナビゲーション: nanv ナビゲーションは特に区別されます: topnav (トップ ナビゲーション)、mainnav (メイン ナビゲーション)、mininav (ミニ ナビゲーション)、textnav (ナビゲーション テキスト)、subnav (サブ ナビゲーション/セカンダリ ナビゲーション)
旗、広告、商標: ロゴ(フラグ)、ブランド(商標)、バナー(スローガン)
検索: sreach (検索)、sreachbox (検索ボックス)、sreachbtn (検索ボタン)、sreachinput (検索入力ボックス)
登録とログイン: login (ログイン)、regsiter (登録)、ユーザーボックス (ユーザー名/パス用のテキストボックス)、パスワード (パスワード)
フッター/ボトム: フット/フッター (フッター/ボトム)、著作権 (著作権情報)、サイトマップ
その他: コンテンツ、スキン、タイトル、フロム、写真、ニュース、ショップ、リスト、ニュースリスト (ニュース リスト)、ダウンロードリスト (ダウンロード リスト)、ピクリスト (画像リスト)、dropmenv (ドロップダウン メニュー)、cor/corner (角丸)、ホームページ (ホーム) page)、crumb(現在地ナビ)実際、上記のIDは名前をつけるときに大文字と小文字、_を区別することが多いです。例えば、メインナビゲーションはMainNav_1、MainNav_2です。 、など。 「型 + 変数名」ルールを使用して名前を付けることもできます。たとえば、赤いフォントでクラスを記述するには、
.f_red {} (f は font の略称) とします。つまり、大文字、_、および略語を使用すると、コードの可読性が大幅に向上するという原則があります。また、私は子 divd に in + 親 div という名前を付ける "in" の書き方をよく使います。これにより、前に名前を付けた後、次の div に名前を付ける方法が分からなくなるという事態を避けることができます。たとえば、intop、inbox、infrom、inlogin などです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
