之前寫css的時候都是想到什麼屬性就寫什麼屬性，隨意的很。特別是在除錯樣式的時候，還會把在瀏覽器除錯的樣式直接複製到隨機的位置。
雖然知道瀏覽器的回流和重繪都會影響渲染的效能，但是僅僅停留在了操作樣式的時候，也沒怎麼考慮在初始寫css的時候順序。
於是好好的學習了一下。
正常我們都知道瀏覽器的渲染過程，就像下圖
瀏覽器的渲染總共分為4步：
解析html生成dom樹,解析css生成cssom規則樹。
將dom樹與cssom規則樹合併在一起生成渲染樹。
遍歷渲染樹開始布局，計算每個節點的位置大小資訊。
將渲染樹每個節點繪製到螢幕。
合理的書寫css的順序，主要作用在生成渲染樹布局和計算大小的時候，讓rendertree提前知道這個dom是在文件流裡的還是脫離了文件流等，避免了渲染了前面各種屬性之後，又發現需要脫離文件流，就又需要重新渲染rendertree等。
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...
推薦的 CSS 書寫順序
以下順序是mozilla推薦的css書寫規範 這個瀏覽器解析過程有關,瀏覽器先對dom定位，然後解析自身屬性，然後再解析內部物件！顯示屬性 display list style position float clear 自身屬性 width height margin padding border ...