先吟幾句：
最近看了看春風十里不如你，本來很少看劇的，暑假有點閑就看了，感覺不錯，挺喜歡這部劇，就套了個名字，嘿嘿嘿。劇里面印象深刻的是《致橡樹》這首詩，念幾句：
我如果愛你,絕不像攀援的凌霄花，借你的高枝炫耀自己;
我如果愛你,絕不學痴情的鳥兒，為綠蔭重復單調的歌曲；
也不止像險峰，增加你的高度，襯托你的威儀。
不騷了，回到正題，寫css也一樣需要愛，你愛一門技術就要用心付出，對知識寸土必爭，寸草必得。寫css容易，寫好就需要下功夫了。如果我愛你，就會去研究怎么去寫好你，下面先說說怎么規范的寫css。
css語法規范：
- 每條屬性聲明占一行，增加易讀性
/*bad*/
body{margin: 0;padding: 0;}
/*good*/
body{
margin: 0;
padding: 0;
}
- 顏色采用十六進制寫法（不使用顏色名），並且能夠簡寫的進行簡寫:
/*bad*/
.example{
color: #ffaabb;
}
/*good*/
.example{
color: #fab;
}
- 0值的單位進行省略，如將margin:0px，寫成margin:0:
/*bad*/
.example{
margin: 0px;
}
/*good*/
.example{
margin: 0;
}
- 有選擇器組時，每個選擇器占一行：
body,
html,
p{
margin: 0;
padding: 0;
}
- 連字符使用-，而不使用_，因為能少按一個shift就少按，還有和js變量命名區分開。
/*bad*/
.index_list {}
/*good*/
.index-list {}
- 選擇器避免使用標簽名。(首先可能使得一些不必要的標簽帶上樣式，其次會對選擇器尋找上也會在一定程度上浪費時間)
/*bad*/
.index-list li{}
/*good*/
.index-list .item{}
- 媒體查詢，不要寫在文檔最后或分開到另外文檔，應該寫在相應規則的附近，這樣有利於修改和閱讀
.index-nav{
margin-top: 10px;
}
/*和相關的規則一起放*/
@media (min-width: 480px){
.index-nav{
margin-top: 5px;
}
}
- 前綴，css3的一些屬性要注意帶上前綴：
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
- 引號方面，使用雙引號而不使用單引號,url不用使用引號：
/*no good*/
.example{
font-family: 'Times New Roman',Georgia,Serif;
background: url("../images/icon.png");
}
/*good*/
.example{
font-family: "Times New Roman",Georgia,Serif;
background: url(../images/icon.png);
}
- 每條屬性聲明語句結束后加上分號，最后一條聲明可省略分號，但不建議
- 每個屬性聲明的冒號（:）后添加一個空格
- 小於1的小數點的值，省略0，如0.5px，可寫成.5px
- 避免使用@ import指令。應使用link標簽來引入css文件
- 避免使用!important，這個優先級最高，濫用會使得維護困難，代碼混亂
- Less,Sass等預處理言的嵌套不超過3層
- 避免使用id:(因為id優先級高，且具有唯一性，復用性差，而且id是html與js的掛鈎，class是HTML與css的掛鈎，這樣能夠讓代碼更為的清晰，不用說看到一個id，既要到js里查查有沒有什么用，又到css里看看有什么樣式，確實麻煩。)
- 注釋需要全面易懂，不要只寫一點
css屬性聲明順序規范：
css屬性的書寫順序大致分為4組，從上到下依次書寫：
- Positioning Model（定位的相關屬性）：
- 有position，display，TRBL，z-index，float，overflow等
- Box Model （盒子模型的屬性）：
- 有margin，padding，border，width，height等
- Typographic （文本，排版）
- 有font，line-height，text-align
- Visual （視覺方面的）
- 有background，color，transition，list-style
例子：
.example{
content: "hello";
/*positioning*/
position: absolute;
top: 10px;
left: 12px;
/*box model*/
margin-top: 20px;
width: 100px;
heith: 100px;
/*typographic*/
text-align: center;
font-size: 12px;
/*visual*/
color: #f00;
background-color: #0f0;
}
特別的：如果有content屬性時，需要把其放到最前面
css的文件分類：
文件分類這不會有什么標准，分好，適合自己開發和維護便可。比如：可以有公共的css，某個頁面的css，重置的css，皮膚的css，部件的css等，可根據自己的需求，習慣等分類。不必太過拘束。
- common.css（通用）
- main.css（主要）
- reset.css（重置）
- skin.css（皮膚）
……
css選擇器命名：
命名這東西可以說讓每個前端開發的人員苦惱的東西，有時得想半天去想一個名字，煎熬啊。老是想，到底怎么樣的命名才比較好呢？我這樣命名接着會不會重復？等等。。。
到底怎樣命名才比較規范，參考一下NEC規范或者是BEM規范。個人比較喜歡NEC，因為其比較簡約些,詳細的可以到NEC官網上看看。
看看NEC的分類：
- 布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！
- 模塊（module）（.m-）：通常是一個語義化的可以重復使用的較大的整體！比如導航、登錄、注冊、各種列表、評論、搜索等！
- 元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復用於各種模塊中！比如按鈕、輸入框、loading、圖標等！
- 功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！
- 皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網站通常只提取文字色！非換膚型網站不可濫用此類！
- 狀態（.z-）：為狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或作為后代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}）
我們參考NEC的分類命名的規范，學習學習它的命名，可以照着使用，也可以有自己不同的命名，可以根據團隊的習慣等。規矩是死的，人是活的，能靈活去變通才是最好的，能夠寫出清晰易懂的代碼就ok。
css命名常用單詞：
- 頭：header
- 尾：footer
- 導航：nav
- 側欄：sidebar
- 欄目：column
- 外圍容器：wrapper
- 登錄條：loginbar
- 標志：logo
- 廣告：banner
- 頁面主體：main
- 熱點：hot
- 新聞：news
- 下載：download
- 子導航：subnav
- 菜單：menu
- 子菜單：submenu
- 搜索：search
- 友情鏈接：friendlink
- 頁腳：footer
- 版權：copyright
- 滾動：scroll
- 內容：content
- 標簽頁：tab
- 文章列表：list
- 信息：msg
- 小技巧：tips
- 標題：title
- 加入：joinus
- 指南：guild
- 服務：service
- 注冊：regsiter
- 狀態：status
- 投票：vote
- 合作伙伴：partner
- 容器：container
- 按鈕：button
單詞這方面能看懂就好，英語也要學號才行啊，有時候不懂怎么命名，就查查英文單詞怎么寫，看得出英語還是很重要啊。css的命名單詞長度不要太長太冗余，看懂就好，有些單詞過長可以適當的縮寫一下。
最后說說：
如果想學好一門技術，就想要從各個方面研究他，本文也是，了解css也要css的規范，這對於強迫症的人就是很好的療葯，我就是這樣，總覺得自己的css寫得太不規范，也不容易維護，想要去修飾好，所以寫寫博客來強迫自己去改正，博客是個好東西，寫給自己看看同時也寫給別人看，所以這會有約束，從而不斷的修飾改正錯誤，從中自己也會學到很多東西，可謂春風十里不如寫博客。