CSS規範--春風十里不如寫好CSS！
css語法規範：
每條屬性聲明佔一行，增加易讀性
顏色採用十六進制寫法（不使用顏色名），並且能夠簡寫的進行簡寫:
0值的單位進行省略，如將margin:0px，寫成margin:0:
有選擇器組時，每個選擇器佔一行：
連字符使用-，而不使用_，因為能少按一個shift就少按，還有和js變量命名區分開。
選擇器避免使用標籤名。(首先可能使得一些不必要的標籤帶上樣式，其次會對選擇器尋找上也會在一定程度上浪費時間)
媒體查詢，不要寫在文檔最後或分開到另外文檔，應該寫在相應規則的附近，這樣有利於修改和閱讀
前綴，css3的一些屬性要注意帶上前綴：
引號方面，使用雙引號而不使用單引號,url不用使用引號：
每條屬性聲明語句結束後加上分號，最後一條聲明可省略分號，但不建議
每個屬性聲明的冒號（:）後添加一個空格
小於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
例子：
特別的：如果有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的命名單詞長度不要太長太冗餘，看懂就好，有些單詞過長可以適當的縮寫一下。
文章摘自博客園
更多精彩推薦
海量IT視頻教程：http://xue.ujiuye.com/
IT必備小技巧：http://zhi.ujiuye.com/
零基礎學習IT技術：http://www.ujiuye.com/zt/qgjx?wt.bd=lsh11tt
相關推薦
