CSS書寫規(guī)范及順序

1/1CSS書寫規(guī)范及順序CSS書寫規(guī)范及順序CSS書寫順序1.位置屬性(position,top,right,z-index,display,float等)2.大小(width,height,padding,margin)3.文字系列(font,line-height,letter-spacing,color-text-align等)4.背景(background,border等)5.其他(animation,transition等)CSS書寫規(guī)范使用CSS縮寫屬性CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。

去掉小數(shù)點前的0簡寫命名很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！16進制顏色代碼縮寫有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。

連字符CSS選擇器命名規(guī)范1.長名稱或詞組可以使用中橫線來為選擇器命名。

2.不建議使用_下劃線來命名CSS選擇器，為什么呢？輸入的時候少按一個shift鍵；瀏覽器兼容問題（比如使用_tips的選擇器命名，在IE6是無效的）能良好區(qū)分JavaScript變量命名（JS變量命名是用_）這里有一篇破折號與下劃線的詳細討論，英文：

點擊查看中文篇：

點擊查看不要隨意使用idid在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復(fù)使用，另外id的優(yōu)先級優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用。

為選擇器添加狀態(tài)前綴有時候可以給選擇器添加一個表示狀態(tài)的前綴，讓語義更明了，比如下圖是添加了.is-前綴。

CSS命名規(guī)范（規(guī)則）常用的CSS命名規(guī)則頭：

header內(nèi)容：

content/container尾：

footer導(dǎo)航：

nav側(cè)欄：

sidebar欄目：

column頁面外圍控制整體佈局寬度：

wrapper左右中：

leftrightcenter登錄條：

loginbar標志：

logo廣告：

banner頁面主體：

main熱點：

hot新聞：

news下載：

download子導(dǎo)航：

subnav菜單：

menu子菜單：

submenu搜索：

search友情鏈接：

friendlink頁腳：

footer版權(quán)：

copyright滾動：

scroll內(nèi)容：

content標簽：

tags文章列表：

list提示信息：

msg小技巧：

tips欄目標題：

title加入：

joinus指南：

guide服務(wù)：

service注冊：

regsiter狀態(tài)：

status投票：

vote合作伙伴：

partner注釋的寫法:/*Header*/內(nèi)容區(qū)/*EndHeader*/id的命名:1)頁面結(jié)構(gòu)容器:container頁頭：

header內(nèi)容：

content/container頁面主體：

main頁尾：

footer導(dǎo)航：

nav側(cè)欄：

sidebar欄目：

column頁面外圍控制整體佈局寬度：

wrapper左右中：

leftrightcenter(2)導(dǎo)航導(dǎo)航：

nav主導(dǎo)航：

mainnav子導(dǎo)航：

subnav頂導(dǎo)航：

topnav邊導(dǎo)航：

sidebar左導(dǎo)航：

leftsidebar右導(dǎo)航：

rightsidebar菜單：

menu子菜單：

submenu標題:title摘要:summary(3)功能標志：

logo廣告：

banner登陸：

login登錄條：

loginbar注冊：

register搜索：

search功能區(qū)：

shop標題：

title加入：

joinus狀態(tài)：

status按鈕：

btn滾動：

scroll標籤頁：

tab文章列表：

list提示信息：

msg當前的:current小技巧：

tips圖標:icon注釋：

note指南：

guild服務(wù)：

service熱點：

hot新聞：

news下載：

download投票：

vote合作伙伴：

partner友情鏈接：

link版權(quán)：

copyright注意事項::1.一律小寫;2.盡量用英文;3.不加中槓和下劃線;4.盡量不縮寫，除非一看就明白的單詞。

CSS樣式表文件命名主要的master.