一、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ī)范
1.使用CSS縮寫屬性
CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時(shí)又能提高用戶的閱讀體驗(yàn)。
2.去掉小數(shù)點(diǎn)前的“0”
3.簡寫命名
很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！
4.16進(jìn)制顏色代碼縮寫
有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗(yàn)為主。
5連字符CSS選擇器命名規(guī)范
1）.長名稱或詞組可以使用中橫線來為選擇器命名。
2）.不建議使用“_”下劃線來命名CSS選擇器，為什么呢？
輸入的時(shí)候少按一個(gè)shift鍵； 瀏覽器兼容問題 （比如使用_tips的選擇器命名，在IE6是無效的） 能良好區(qū)分JavaScript變量命名（JS變量命名是用“_”）
6.不要隨意使用id
id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復(fù)使用，另外id的優(yōu)先級優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用。
7.為選擇器添加狀態(tài)前綴
有時(shí)候可以給選擇器添加一個(gè)表示狀態(tài)的前綴，讓語義更明了，比如下圖是添加了“.is-”前綴。
三、CSS命名規(guī)范（規(guī)則）
常用的CSS命名規(guī)則
頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
左右中：left right center
登錄條：loginbar
標(biāo)志：logo
廣告：banner
頁面主體：main
熱點(diǎn)：hot
新聞：news
下載：download
子導(dǎo)航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權(quán)：copyright
滾動：scroll
內(nèi)容：content
標(biāo)簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標(biāo)題：title
加入：joinus
指南：guide
服務(wù)：service
注冊：regsiter
狀態(tài)：status
投票：vote
合作伙伴：partner
注釋的寫法:
/* Header */
內(nèi)容區(qū)
/* End Header */
id的命名:
1)頁面結(jié)構(gòu)
容器: container
頁頭：header
內(nèi)容：content/container
頁面主體：main
頁尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
左右中：left right center
(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
標(biāo)題: title
摘要: summary
(3)功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動：scroll
標(biāo)籤頁：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標(biāo): icon
注釋：note
指南：guild
服務(wù)：service
熱點(diǎn)：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
四、注意事項(xiàng)::
1.一律小寫;
2.盡量用英文;
3.不加中槓和下劃線;
4.盡量不縮寫，除非一看就明白的單詞。
五、CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補(bǔ)丁 mend.css
打印 print.css
三無原則：無ID，無層級，無標(biāo)簽
CSS 中 id 與 class 命名規(guī)則及編碼的 6 個(gè)最佳習(xí)慣
一、用class-name方式寫類名
以前喜歡用class_name寫，不過好像兩樣也沒什么差別。但我比較反對用className寫類名，因?yàn)槭冀K對瀏覽器大小寫敏感的問題抱有懷疑態(tài)度。但是id我會寫成駝峰式，理由見下一條。
二、樣式都用class而不用id
有三個(gè)理由。
1，id不可以重復(fù)，所以用class的話，可以肆無忌憚的用無數(shù)次。
2，id的優(yōu)先級太高，若是寫了一個(gè)#page_contenta{color:#f60}，那你完蛋了，里面要改鏈接顏色，都必須加上#page_content才能越過這個(gè)優(yōu)先級。
3，id專門留給JS用，這樣才符合表現(xiàn)與行為分離的原則。所以id我用駝峰式，也是為了體現(xiàn)這一點(diǎn)。
三、margin和padding，盡量省略最后一個(gè)值
比如margin:20px10px5px10px;，左右值是一樣的，就應(yīng)該省略掉最后一個(gè)值，寫成margin:20px10px5px;這樣到時(shí)候要改左右間距，改一個(gè)就好，免得改漏了。其實(shí)這個(gè)問題雖然很細(xì)小，但是可以看得出對margin四個(gè)值省略規(guī)則的熟練程度。
四、按標(biāo)準(zhǔn)寫css，再針對特定瀏覽器作hack
比如，通常我們會遇到如下的寫法：
ExampleSourceCode
.side_col_52CSS{
float:left;
display:inline;
margin-left:20px;
}
而我的寫法會是：
ExampleSourceCode
.side_col_52CSS{
float:left;
margin-left:20px;
}
*.side_col_52CSS{
_display:inline;/*hackedforIE6*/
}
看明白了么？不應(yīng)該把hack混在一起，也不應(yīng)該用一種僥幸的心態(tài)，覺得float:left與display:inline寫在一起沒事。嗯，它們倆確實(shí)沒事兒，但是其他的hack就不一定了。而且這里寫display:inline純粹就是為了解決IE6的bug，所以前面加上下劃線，以明確的表達(dá)你的目的。
另外不要以為凡是hack都是為IE準(zhǔn)備的。其實(shí)有些hack是針對其他瀏覽器的，比如FF。這就要求你對css標(biāo)準(zhǔn)的熟練掌握，能夠自信的判斷哪些渲染是遵守標(biāo)準(zhǔn)，哪些違反標(biāo)準(zhǔn)的。
此外，我喜歡在hack前面加上星號，其實(shí)這純粹是個(gè)人習(xí)慣了?？赡苓^段時(shí)間我就不這么用了，呵呵。
五、記得加空格
.class_name{property:value;}。我個(gè)人覺得合理的空格是優(yōu)秀代碼的一個(gè)指標(biāo)。按英文的習(xí)慣，標(biāo)點(diǎn)后面都應(yīng)該帶空格（如果你寫Thisisapen.That’sapencil.句點(diǎn)后面不加空格，word里面會有錯(cuò)誤提示）。所以既然css是外國人發(fā)明的，應(yīng)該按他們的格式來寫。類似的，在JS里vara=b+c;里面的空格也應(yīng)該都要加。
六、適當(dāng)?shù)膶盈B（Cascading)或縮進(jìn)以定義css的“作用域”
什么是“css的作用域”？其實(shí)并不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊里面，比如“導(dǎo)航欄”里的“搜索框”，可能應(yīng)該寫成：
ExampleSourceCode
.nav .search{}
而有時(shí)候用層疊會增加代碼優(yōu)先級，所以也可以用縮進(jìn)來“象征性的”體現(xiàn)作用域。像這樣：
ExampleSourceCode
.login_box{}
? ? ?.forgot_pwd{}
縮進(jìn)，是為了表示它們對應(yīng)的標(biāo)簽具有父子關(guān)系。但這樣只能起一個(gè)提醒的作用。
