以前一直以為css**，沒什麼可優化之處，直到前幾天看到一篇文章，用良好的css書寫習慣來寫css**，這樣會提高**的閱讀體驗。
css書寫順序
1.位置屬性(position, top, right, z-index, display, float, clear等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color, text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
下面是mozilla firefox所建議的css書寫順序，對我們的**書寫很有參考價值：
mozilla.org base styles
* maintained by fantasai
* (classes defined in the markup guide -
*//* suggested order:
//顯示屬性
* display
* list-style
* position
* float
* clear
//自身屬性
* width
* height
* margin
* padding
* border
* background
//文字屬性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
**/<--文章內容結束標識，勿刪！！--> <--page-->
css編碼的順序問題，這是乙個非常微小的細節問題，但涉及到團隊協作以及讓您的編碼更加工整，強烈推薦以一定的順序來進行編碼。看下面的例子： a:
.wrap b:
.wrap
我們發現，b段
**明顯要比a段
**工整很多，這樣在修改樣式時可以很快的找到相關屬性，進而進行調整。而a段
**看上去很雜亂，如果定義的屬性足夠多，根本不清楚寫在了什麼地方。以b段
**的形式按一定的順序進行編碼也有利於團隊協作共同開發。
width:74%;
padding:0 10px;
color:#c7c7cd;
CSS 書寫順序
display visibility list style list style type list style position list style image position top right bottom left z index clear float width max width ...
Css樣式書寫順序
我不知道是否有人嚴格按照一定的順序來書寫css的樣式，可以說幾乎都是需要什麼樣式就加什麼樣式，完全沒有考慮過樣式屬性書寫的順序對效能有什麼影響。我一直堅信，前端的效能優化都是從細節堆出來的，不注意css屬性的順序確實也可以實現我們需要的各種操作，但是慢慢的讓自己遵從最優的寫法，提高自己或者是優秀自己...
CSS屬性書寫順序
建議遵循以下順序 1 布局定位屬性 display position float clear visibility overflow 建議display第乙個寫，畢竟關係到模式 2 自身屬性 盒模型 width height margin padding border background 3 文字...