Css樣式書寫順序

我不知道是否有人嚴格按照一定的順序來書寫css的樣式，可以說幾乎都是需要什麼樣式就加什麼樣式，完全沒有考慮過樣式屬性書寫的順序對效能有什麼影響。

我一直堅信，前端的效能優化都是從細節堆出來的，不注意css屬性的順序確實也可以實現我們需要的各種操作，但是慢慢的讓自己遵從最優的寫法，提高自己或者是優秀自己還是有必要的。

1.解析html構建dom樹

2.解析css構建cssom樹

3.將dom樹和cssom樹合併構建render樹

4.布局

5.繪製

6.重排reflow

7.重繪repaint

位置屬性：position display float left top right bottom overflow clear z-index

尺寸（自身）屬性：width height padding border margin

文字屬性：font-family font-size font-style font-weight font-varient color text-align vertical-align word-spacing white-space text-overflow

背景：background、border等

css3中新增屬性：content box-shadow border-radius transform等

這樣比較不好理解，我們講一些例子

span

span

簡單說就是位置和尺寸會涉及重排，顏色等會涉及重繪，初始化過程中我們當然是盡量避免重排和重繪，所以按照順序書寫css樣式，有助於效能的優化，頁面的渲染。

CSS樣式書寫順序

css樣式的書寫順序，也會影響頁面的載入，所以css樣式的書寫順序也是需要注意一下的。css書寫順序 位置元素定位 自身屬性 文字樣式 文字屬性 c3中新增屬性.位置元素有 position 定位屬性，float 浮動屬性，overflow 溢位屬性，z index 顯示層級問題 自身元素有 寬高 ...

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 這樣會提高 的閱讀體驗。css書寫順序 1.位置屬性 position,top,right,z index,display,float,clear等 2.大小 width,height,padding,m...