? ?相信幾乎所有的程序員對HTML和CSS并不陌生，但是你真的了解它的編寫方法和規范嗎？本文將和大家一起探討CSS出色編寫方法。
1.層級書寫
位置屬性：position、top、left、bottom、right、display、float等。
盒子模型相關屬性：width、height、padding、margin、border等。
字體顏色排版屬性：font、text-align、line-height等。
視覺背景邊框等屬性：background、transition、animation、transform等。
這里說一下這樣寫的原因，把位置屬性寫在最前是為了讓我們更好的去發現css中出現的repaint（重繪）和reflow（回流），因為重繪和回流會影響頁面的加載，也就是影響網站性能。我們這樣寫可以及時發現不必要的位置屬性，并將其剔除，從而減少頁面的重繪和回流。盒模型排第2位，因為他決定了組件的尺寸和位置，其他屬性只會影響內部不會影響組件外部樣式，故放在最后。
2.代碼縮寫(shorthand)
? ?如margin、padding、border、background、animate、transition等，可提高閱讀體驗，并且也提高了編碼速度。
a.去掉0.8em前的“0”。
b.去掉0px后的“px”。
c.16進制顏色盡可能使用3個字符，譬如#dddddd，改為#ddd。
d.16進制值應該全部小寫，如#fff；在掃描文檔時，小寫字符易于分辨。
3.根據項目需求使用相應的reset
相信現在已經很少人用*{margin:0;padding:0;}這種通用選擇器進行全局重置了，因為它影響性能，我們更多人采用的是阿里的reset。雖然它很不多，但是對于不同的項目而已，有的重置是不需要的，所以沒必要全部寫進去，要看實際需求。這是一個reset.css的鏈接http://www.cssreset.com/，感興趣的可以看一下。
4.利用css選擇器，合理使用繼承
? ?a.如果父元素的多個子元素有相同的樣式，無疑把樣式定義在父元素上最佳。
? ?b.對于沒有所屬關系的平級元素，如果有很多相同的樣式，我們可以選擇使用群組選擇器，進行合并，類似于reset。
5.必要的代碼注釋
相信很多朋友跟我一樣，不愿意看別人寫的代碼，其實也不是自己不愿意，而是有些“前輩們”寫的樣式太不知所云，導致看起來頭疼，還不如自己重寫，所以必要的注釋還是可以有的；但請注意，我這里說的是必要的注釋，而不是要多寫注釋。最好按照功能的類別來對一組樣式表寫統一注釋，獨立成行。
6.制定命名規范
相信很多人對class的取名很苦惱，其實我也是，不過以前老師說過一句話很好：“如果你不知道怎么給class命名，那就去看看‘大牛們’的代碼吧！”，可以看看bootStrap、jqueryMobile等框架css的命名方式。
以下為幾點建議：
a.采用“-”、駝峰命名法
? ? 譬如left-count-down、leftCountDown，不要用eftcountdown或者 _leftcountdown（部分瀏覽器不兼容）進行命名。
b.簡寫命名
?對于左側導航“left-navgation”，我們可以簡化為“left-nav”，但前提是可以見名知意，如果達不到這種效果的話，那就老老實實寫全稱。
c.有js操作的class命名
對于進行js操作的class可采用“js-left-container”的方式進行命名。大型項目中最好在ID或class名字前加上這種標識性前綴（命名空間），使用短破折號鏈接，譬如“”qovd-js-container。因為使用命名空間可以防止命名沖突，方便維護，比如在搜索和替換操作上。
d.必要的時候使用ID選擇器
?一般可以使用class代替的，盡量不用ID，原因在于id可以作為變量使用， id更多使用與js操作，不過現在js操作也在淡化id的使用。
e.避免使用標簽與ID或class進行組合
非必要的情況下不要使用元素標簽名和ID或class進行組合，譬如div.title{margin: 20px;}。同時單個元素，多類選擇器最好不超過3個，譬如class=”menu left-content content”。
f.為選擇器添加狀態前綴
為選擇器添加狀態前綴,使其語義化，譬如“.show”，改為“.is-show”，對于js操作的元素經常使用到類似的寫法，進行元素的顯示和隱藏。
g.基于最近父元素class進行子元素命名的前綴
譬如父元素class=”new”，子元素則命名為class=”new-title”，這種習慣看你個人，如果怕看混了，就建議不要用了。
7.選擇更優的屬性值
譬如border:0px瀏覽器會解析渲染，消耗內存，而border:none，瀏覽器則不做渲染，不消耗內存。
8.盡量不用@import及css表達式
? 增加HTTP請求次數，影響加載速度，出現從而影響加載速度。替代方法：使用、使用sass或者less將多個css文件編譯成一個文件。
是XHTML標簽，頁面被加載時同步加載；@import只加載css，而且是待css解析器讀取到css文件中有@import再去請求服務器下載樣式，故有可能出現閃屏（其實就是樣式未加載完成）。前者不存在兼容性問題，后者IE5+瀏覽器才能識別(這個方面基本可以忽略)。前者可使用DOM操作控制，后者無法控制。
9.使用外聯CSS，盡量少用內聯樣式
這樣做其實也是為了嚴格保持結構 （標記），表現 （樣式），和行為 （腳本）相分離, 并盡量讓這三者之間的交互保持最低限度。
10.嵌入式資源書寫省略協議頭
省略圖像、媒體文件、樣式表和腳本等URL協議頭部聲明 ( http: , https: )。如果不是這兩個聲明的URL則不省略。省略協議聲明，使URL成相對地址，防止內容混淆問題和導致小文件重復下載。
11.其它書寫注意事項
a.在屬性名冒號結束后加一個空字符。
b.每個選擇器和注釋都獨立成行。
c.注意元素的大小寫，所有屬性都要用“;”結尾。
d.省略type=“text/css”。
e.統一設置編輯器文字縮進2-4空格。
f .建議一個屬性寫一行，畢竟代碼在上測試前，我們會使用webpack之類的 打包工具進行打包，所以你不用擔心占據空間。
g.將媒體查詢盡可能放在對應規則附近，如果放的太遠，很有可能會被遺忘。
h.為避免不必要的繼承，可以為class添加命名空間。
i.組件化、功能塊、內容塊方式編寫css。
12.前綴兼容性書寫
? ?必要的css兼容性處理還是很重要的。
13.最好避免使用的CSS “hacks”
雖然它很有誘惑力，可以當作用戶代理檢測或特殊的CSS過濾器，但它的行為太過于頻繁，會長期傷害項目的效率和代碼管理，所以能用其他的解決方案就找其他的。
14.引入less、sass、postcss、stylus等CSS預處理語言
現在基本很少直接寫CSS了，都是使用CSS預處理語言，less和sass已經很常見了，大家有時間可以看看postcss。postcss和sass無沖突， postcss不僅具有sass的功能，同時還可以可以對sass處理過后的CSS再處理，而且預處理速度也很快。
最后，附上推薦class命名表。
如果上述內容存在問題，希望大家及時指正，同時也希望大家可以補充。我始終相信知識只有分享，才會越來越好。
