基礎知識常被5：CSS樣式表屬性最佳書寫順序是怎樣的？
自己在寫demo的時候不用考慮代碼的優化，能測試出效果就可以了，但是在實際工作中，企業工作中，必須提高性能，優化代碼，讓客戶擁有一個極高的體驗性，所以在網上查詢了一下相關資料，
原文地址：https://dxs12580.com/css-the-order.html
（1）定位屬性：position、display、float、left、top、right、bottom、overflow、clear、z-index
（2）自身屬性：width、height、padding、border、margin、background
（3）文字樣式：font-family、font-size、font-style、font-weight、font-varient color
（4）文本屬性：text-align、vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、word-spacing、white-space、text-overflow
（5）css3中新增屬性：content、box-shadow、border-radius、transform
那麼至此，書寫順序我們已經知道，但是究竟爲什麼要這麼書寫呢？
用一句話概括：其目的是減少瀏覽器reflow（迴流），從而提升瀏覽器渲染dom的性能。
再具體的分析就是：
①解析html構建dom樹，解析css構建css樹：將html解析成樹形的數據結構，將css解析成樹形的數據結構
②構建render樹：DOM樹和CSS樹合併之後形成的render樹。
③佈局render樹：有了render樹，瀏覽器已經知道那些網頁中有哪些節點，各個節點的css定義和以及它們的從屬關係，從而計算出每個節點在屏幕中的位置。
④繪製render樹：按照計算出來的規則，通過顯卡把內容畫在屏幕上。
css樣式解析到顯示至瀏覽器屏幕上就發生在②③④步驟，可見瀏覽器並不是一獲取到css樣式就立馬開始解析而是根據css樣式的書寫順序將之按照dom樹的結構分佈render樣式，完成第②步，然後開始遍歷每個樹結點的css樣式進行解析，此時的css樣式的遍歷順序完全是按照之前的書寫順序。
在解析過程中，一旦瀏覽器發現某個元素的定位變化影響佈局，則需要倒回去重新渲染正如按照這樣的書寫書序：
width: 100px;
height: 100px;
background-color: red ;
position: absolute;
當瀏覽器解析到position的時候突然發現該元素是絕對定位元素需要脫離文檔流，而之前卻是按照普通元素進行解析的，所以不得不重新渲染，解除該元素在文檔中所佔位置，然而由於該元素的佔位發生變化，其他元素也可能會受到它迴流的影響而重新排位。最終導致③步驟花費的時間太久而影響到④步驟的顯示，影響了用戶體驗。
所以，不規範的屬性書寫順序會讓瀏覽器渲染過程中多次迴流，做了很多“無用功”，而一套合理的樣式表則是事半功倍的。
可能上面這一大段很多初學朋友會覺得特別枯燥，那也沒關係，原理這個東西是比較高階的，我們只需要記住 樣式屬性按照如下順序來即可
歡迎大家前來評論