前言：最近在做微信小程序，因為公司小，就我一個人弄前端的東西，js和頁面都是我來弄，結果那天後臺的人看到我的js代碼，說我的代碼寫得不規範，函數什麽的都很亂，弄得我羞愧難當，幸虧沒看我的css，其實我的css命名也很隨意==！一直覺得自己css其實還是可以的，但是突然發現自己到現在的css還沒有很規範，很多名稱什麽的還很隨意，有的地方用駝峰命名，有的又用橫杠，有的還會用下劃線，真的太隨意了，所以就上網搜了搜命名規範，改了兩天終於把樣式全改過來了。因此做個小結：

意義：感覺規範css代碼是非常有意義的，早點有一套自己的規範的話在以後的編寫css的時候就可以省去很多想應該怎麽命名的時間，從長遠的角度還是非常有好處的，其次別人看你的css時就可以一眼知道它代表的是什麽意思，最後可以裝b，哈哈。

規範：其實我是直接百度“css代碼規範”，然後就搜到好多信息，看到知乎裏人推薦網易¹的一套前端規範，然後看了看確實不錯，就以它為基礎整理了自己的css編寫規範。

　　分類及命名：

　　一、大體分下面幾大類，分別以g-、m- 、u-、f-、s-、z-及自定義x-來命名第一個字母，表明 作用

1. 布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！
2. 模塊（module）（.m-）：通常是一個語義化的可以重復使用的較大的整體！比如導航、登錄、註冊、各種列表、評論、搜索等！
3. 元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復用於各種模塊中！比如按鈕、輸入框、loading、圖標等！
4. 功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！
5. 皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網站通常只提取文字色！非換膚型網站不可濫用此類！
6. 狀態（.z-）：為狀態類樣式加入前綴

　　　　ps：為什麽要用連字符還是有一些討論的：CSS樣式名中的下劃線與連字符

　　二、選擇器屬性和屬性值一律用小寫

　　三、每個屬性值後面都加分號結尾，即使是最後一個

　　四、省略值為0時的單位 即：0px，0em，0% -> 0

　　五、一律使用單引號

　　六、使用16進制表示顏色（除了透明度用rgba）

　　七、屬性與值之間有一個半角空格的間距

　　八、書寫順序²：

　　　　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等)

　　　　ps：其實這裏面的height和line-heightde位置我是很糾結的，因為其實很多時候我都是直接省略height直接用line-height來撐起來的高度，自己實際上還是沒太搞懂line-height 這個屬性，需要註意去研究一下！！

　　九、其他：

　　　　一般寫css的時候都需要重置一些瀏覽器默認的css，這裏有個優化閱讀體驗的文章，還可以，裏面的把#000純黑的顏色改成#333這個小技巧很多網站都在用，自己也沒在意，因此特地記一下。

縮略詞：其實我在改寫我的那些css的時候很多時候我都在思考應該怎麽縮寫那些單詞，雖然網易前端規範也寫了一些縮略，但是挺少的，正好找了一篇文章，可以在這裏查查，實在找不到就百度去吧。常用縮略詞：http://blog.csdn.net/yfh1985sdq/article/details/17260429

參考地址：

1 網易前端規範：http://www.shejidaren.com/css-written-specifications.html

2 css書寫順序討論：http://www.cnblogs.com/wybie/p/3689867.html

3 css編寫規範，有例子，界面也很好看，我大體就是參考這個網站個網易前端規範來的：http://nec.netease.com/standard/css-practice.html

最後，寫博客也是挺累的，，，真的很佩服網上那些大神，既能寫的那麽精簡，又能幽默風趣，真的讓人羨慕呀，沒錯，我說的就是張鑫旭張大神，任重而道遠啊~

個人css編寫規範