前端CSS規(guī)范整理 命名規(guī)范的整理

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

當(dāng)前標(biāo)題：前端CSS規(guī)范整理 命名規(guī)范的整理
文章路徑：http://www.bm7419.com/news9/167259.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站設(shè)計(jì)公司、域名注冊、靜態(tài)網(wǎng)站、做網(wǎng)站、電子商務(wù)

廣告

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