css和js的命名規範
筆者在擼程式碼是也會遇到不知道給元素或變數起什麼名字的問題,中文拼音太俗氣,隨便敲幾個字母又影響程式碼的查讀性。於是總結這些命名規範。有些資料來源於網路
一 .css命名規範
1.命名規則說明:
1)、所有的命名最好都小寫
2)、屬性的值一定要用雙引號("")括起來,且一定要有值如class="divcss5",id="divcss5"
3)、每個標籤都要有開始和結束,且要有正確的層次,排版有規律工整
4)、空元素要有結束的tag或於開始的tag後加上"/"
5)、表現與結構完全分離,程式碼中不涉及任何的表現元素,如style、font、bgColor、border等
6)、<h1>到<h5>的定義,應遵循從大到小的原則,體現文件的結構,並有利於搜尋引擎的查詢。
7)、給每一個表格和表單加上一個唯一的、結構標記id
8)、給圖片加上alt標籤
9)、儘量使用英文命名原則
10)、儘量不縮寫,除非一看就明白的單詞
2.相對網頁外層重要部分CSS樣式命名:
外套 wrap ------------------用於最外層
頭部 header ----------------用於頭部
主要內容 main ------------用於主體內容(中部)
左側 main-left -------------左側佈局
右側 main-right -----------右側佈局
導航條 nav -----------------網頁選單導航條
內容 content ---------------用於網頁中部主體
底部 footer -----------------用於底部
3.DIV+CSS命名參考表:
DIV CSS命名集合:
CSS樣式命名 | 說明 |
---|---|
網頁公共命名 | |
#wrapper | 頁面外圍控制整體佈局寬度 |
#container或#content | 容器,用於最外層 |
#layout | 佈局 |
#head, #header | 頁頭部分 |
#foot, #footer | 頁尾部分 |
#nav | 主導航 |
#subnav | 二級導航 |
#menu | 選單 |
#submenu | 子選單 |
#sideBar | 側欄 |
#sidebar_a, #sidebar_b | 左邊欄或右邊欄 |
#main | 頁面主體 |
#tag | 標籤 |
#msg #message | 提示資訊 |
#tips | 小技巧 |
#vote | 投票 |
#friendlink | 友情連線 |
#title | 標題 |
#summary | 摘要 |
#loginbar | 登入條 |
#searchInput | 搜尋輸入框 |
#hot | 熱門熱點 |
#search | 搜尋 |
#search_output | 搜尋輸出和搜尋結果相似 |
#searchBar | 搜尋條 |
#search_results | 搜尋結果 |
#copyright | 版權資訊 |
#branding | 商標 |
#logo | 網站LOGO標誌 |
#siteinfo | 網站資訊 |
#siteinfoLegal | 法律宣告 |
#siteinfoCredits | 信譽 |
#joinus | 加入我們 |
#partner | 合作伙伴 |
#service | 服務 |
#regsiter | 註冊 |
arr/arrow | 箭頭 |
#guild | 指南 |
#sitemap | 網站地圖 |
#list | 列表 |
#homepage | 首頁 |
#subpage | 二級頁面子頁面 |
#tool, #toolbar | 工具條 |
#drop | 下拉 |
#dorpmenu | 下拉選單 |
#status | 狀態 |
#scroll | 滾動 |
.tab | 標籤頁 |
.left .right .center | 居左、中、右 |
.news | 新聞 |
.download | 下載 |
.banner | 廣告條(頂部廣告條) |
電子貿易相關 | |
.products | 產品 |
.products_prices | 產品價格 |
.products_description | 產品描述 |
.products_review | 產品評論 |
.editor_review | 編輯評論 |
.news_release | 最新產品 |
.publisher | 生產商 |
.screenshot | 縮圖 |
.faqs | 常見問題 |
.keyword | 關鍵詞 |
.blog | 部落格 |
.forum | 論壇 |
CSS檔案命名 | 說明 |
---|---|
master.css,style.css | 主要的 |
module.css | 模組 |
base.css | 基本共用 |
layout.css | 佈局,版面 |
themes.css | 主題 |
columns.css | 專欄 |
font.css | 文字、字型 |
forms.css | 表單 |
mend.css | 補丁 |
print.css | 列印 |
CSS命名其它說明:
DIV+CSS命名小結:無論是使用“.”(小寫句號)選擇符號開頭命名,還是使用“#”(井號)選擇符號開頭命名都無所謂,但我們最好遵循,主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名,其它都用“.”(小寫句號)選擇符號開頭命名,同時考慮命名的css選擇器在HTML中重複使用呼叫。
通常我們最常用主要命名有:wrap(外套、最外層)、header(頁首、頭部)、nav(導航條)、menu(選單)、title(欄目標題、一般配合h1\h2\h3\h4標籤使用)
、content (內容區)、footer(頁尾、底部)、logo(標誌、可以配合h1標籤使用)、banner(廣告條,一般在頂部)、copyRight(版權)。其它可根據自己需要選擇性使用。
DIVCSS5建議:主要的、重要的、最外層的盒子用“#”(井號)選擇符號開頭命名,其它都用“.”(小寫句號)選擇符號開頭命名。
2.css樣式檔案命名如下
主要的 master.css
佈局,版面 layout.css
專欄 columns.css
文字 font.css
列印樣式 print.css
主題 themes.css
然後一些div包含的元素的命名可以以div名字為字首再加其所在位置屬性的英文名縮寫
二.js命名規範
1.變數命名
1. 匈牙利命名:
開頭字母用變數型別的縮寫,其餘部分用變數的英文或英文的縮寫,要求單詞第一個字母大寫。
For example: long lsum = 0;"l"是型別的縮寫;
s:表示字串。例如:sName,sHtml;
n:表示數字。例如:nPage,nTotal;
b:表示邏輯。例如:bChecked,bHasLogin;
a:表示陣列。例如:aList,aGroup;
r:表示正則表示式。例如:rDomain,rEmail;
f:表示函式。例如:fGetHtml,fInit;
o:表示以上未涉及到的其他物件,例如:oButton,oDate;
g:表示全域性變數,例如:gUserName,gLoginTime;
2. 駝峰式:
第一個單詞首字母小寫,後面其他單詞首字母大寫。
For example: firstName
2.函式命名
函式命名:統一使用動詞或者動詞+名詞形式 ---- fnInit()
物件方法命名使用fn+物件類名+動詞+名詞形式 fnAnimateDoRun()
某事件響應函式命名方式為fn+觸發事件物件名+事件名或者模組名 fnDivClick()
附常用的動詞列表:
get 獲取/set 設定, add 增加/remove 刪除
create 建立/destory 移除 start 啟動/stop 停止
open 開啟/close 關閉, read 讀取/write 寫入
load 載入/save 儲存, create 建立/destroy 銷燬
begin 開始/end 結束, backup 備份/restore 恢復
import 匯入/export 匯出, split 分割/merge 合併
inject 注入/extract 提取, attach 附著/detach 脫離
bind 繫結/separate 分離, view 檢視/browse 瀏覽
edit 編輯/modify 修改, select 選取/mark 標記
copy 複製/paste 貼上, undo 撤銷/redo 重做
insert 插入/delete 移除, add 加入/append 新增
clean 清理/clear 清除, index 索引/sort 排序
find 查詢/search 搜尋, increase 增加/decrease 減少
play 播放/pause 暫停, launch 啟動/run 執行
compile 編譯/execute 執行, debug 除錯/trace 跟蹤
observe 觀察/listen 監聽, build 構建/publish 釋出
input 輸入/output 輸出, encode 編碼/decode 解碼
encrypt 加密/decrypt 解密, compress 壓縮/decompress 解壓縮
pack 打包/unpack 解包, parse 解析/emit 生成
connect 連線/disconnect 斷開, send 傳送/receive 接收
download 下載/upload 上傳, refresh 重新整理/synchronize 同步
update 更新/revert 復原, lock 鎖定/unlock 解鎖
check out 簽出/check in 簽入, submit 提交/commit 交付
push 推/pull 拉, expand 展開/collapse 摺疊
begin 起始/end 結束, start 開始/finish 完成
enter 進入/exit 退出, abort 放棄/quit 離開
obsolete 廢棄/depreciate 廢舊, collect 收集/aggregate 聚集附上一段程式碼細細品味
var ClassName = function(){//類名
var _FieldName = "Test Field";//私有變數
this.PropertyName = "Test Property Name"; //屬性
var functionName = function(){//私有方法
return "";
} A:加 _ 下劃線字首
this.PublicFunctionName = function(pTestName){//公有方法 pTestName:引數
var condition = "condition";//區域性變數
if(condition){//判斷
return functionName();
}else{} B:小寫開頭
var nameCol = ["a","b"]; //陣列
var nameItem = nameCol[0]; //陣列項
for(var i = 0; i < nameCol.length; i++){//迴圈
} C:大寫開頭
var selectName = "item";
switch(selectName){//選擇
case "item":
break;
} D:加小寫p字首
}