運用有含義的或通用的ID和class命名：ID和class的命名應反映該元素的功用或運用通用稱號，而不要用籠統的不流暢的命名。反映元素的運用意圖是選；運用通用稱號代表該元素不表特定含義，與其同級元素無異，通常是用于輔佐命名；運用功用性或通用的稱號能夠更適用于文檔或模版改變的狀況。
/* 不引薦: 無含義 */ #yee-1901 {}
/* 不引薦: 與款式有關 */ .button-green {}.clear {}
/* 引薦: 特別性 */ #gallery {}#login {}.video {}
/* 引薦: 通用性 */ .aux {}.alt {}
常用命名（多記多查英文單詞）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等
ID和class命名越簡略越好，只需滿意表達寓意。這樣既有助于知道，也能進步代碼功率。
/* 不引薦 */ #navigation {}.atr {}
/* 引薦 */ #nav {}.author {}
類型選擇器防止一起運用標簽、ID和class作為定位一個元素選擇器；從功用上思考也應盡量削減選擇器的層級。
/* 不引薦 */ul#example {}div.error {}
/* 引薦 */#example {}.error {}
命名時需求注意的點：
規矩命名中，一概選用小寫加中劃線的辦法，不答應運用大寫字母或 _
命名防止運用中文拼音，大概選用更簡明有語義的英文單詞進行組合
命名注意縮寫，可是不能盲目縮寫，詳細請拜見常用的CSS命名規矩
不答應通過1、2、3等序號進行命名
防止class與id重名
id用于標識模塊或頁面的某一個父容器區域，稱號有必要僅有，不要隨意新建id
class用于標識某一個類型的方針，命名有必要要言不煩。
盡可能進步代碼模塊的復用，款式盡量用組合的辦法
規矩稱號中不大概包括色彩（red/blue）、定位（left/right）等與詳細顯現作用有關的信息。大概用含義命名，而不是款式顯現成果命名。
1、常用id的命名：
(1)頁面規劃
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
節目：column
頁面外圍操控全體規劃寬度：wrapper
左右中：left right center
(2)導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
(3)功用
象征：logo
廣告：banner
登入：login
登錄條：loginbar
注冊：regsiter
查找：search
功用區：shop
標題：title
參加：joinus
狀況：status
按鈕：btn
翻滾：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當時的: current
小竅門：tips
圖標: icon
注釋：note
攻略：guild
效勞：service
熱門：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情連接：link
版權：copyright
2、常用class的命名：
(1)色彩:運用色彩的稱號或許16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字體巨細,直接運用”font+字體巨細”作為稱號,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對齊款式,運用對齊方針的英文稱號,如
.left { float:left; }
.bottom { float:bottom; }
(4)標題欄款式,運用”種類+功用”的辦法命名,如
.barnews { }
.barproduct { } 

當前標題：前端CSS規范整理 命名規范的整理
文章路徑：http://www.js-pz168.com/news9/167259.html

成都網站建設公司_創新互聯，為您提供建站公司、網站設計公司、域名注冊、靜態網站、做網站、電子商務

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯