1、屬性順序
建議遵循以下順序：
同一 rule set 下的屬性在書寫時，應按功能進行分組，
並以 formatting model（布局方式、位置） > box model（尺寸） > typographic（文字相關） > visual（視覺效果） 的順序書寫，
以提高**的可讀性。
補充：布局定位屬性：display / position / float / clear / visibility / overflow
自身屬性：width / height / margin / padding / border / background
文字屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他屬性（css3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
另外，如果包含content屬性，應放在最前面
.demo
mozilla官方屬性順序推薦
2、css3瀏覽器私有字首寫法
css3 瀏覽器私有字首在前，標準字首在後
.demo
更多關於瀏覽器私有前輟寫法：#vendor-specific extensions
3、其他
3.1 清除浮動
當元素需要撐起高度以包含內部的浮動元素時，通過對偽類設定clear或觸發bfc的方式進行clearfix。盡量不使用增加空標籤的方式。
觸發 bfc 的方式很多，常見的有：
如希望使用更小***的清除浮動方法，參見 a new micro clearfix hack 一文。
另需注意，對已經觸發 bfc 的元素不需要再進行 clearfix。
3.2 !important
盡量不使用!important宣告。
當需要強制指定樣式且不允許任何場景覆蓋時，通過標籤內聯和!important定義樣式。
必須注意的是，僅在設計上確實不允許任何其它場景覆蓋樣式時，才使用內聯的!important樣式。通常在第三方環境的應用中使用這種方案。下面的 z-index 章節是其中乙個特殊場景的典型樣例。
3.3 z-index
將z-index進行分層，對文件流外絕對定位元素的視覺層級關係進行管理。
同層的多個元素，如多個由使用者輸入觸發的 dialog，在該層級內使用相同的z-index或遞增z-index。
建議每層包含100個z-index來容納足夠的元素，如果每層元素較多，可以調整這個數值。
在可控環境下，期望顯示在最上層的元素，z-index指定為999999。
可控環境分成兩種，一種是自身產品線環境；還有一種是可能會被其他產品線引用，但是不會被外部第三方的產品引用。
不建議取值為2147483647。以便於自身產品線被其他產品線引用時，當遇到層級覆蓋衝突的情況，留出向上調整的空間
在第三方環境下，期望顯示在最上層的元素，通過標籤內聯和!important，將z-index指定為2147483647。
第三方環境對於開發者來說完全不可控。在第三方環境下的元素，為了保證元素不被其頁面其他樣式定義覆蓋，需要採用此做法。
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樣式書寫順序
我不知道是否有人嚴格按照一定的順序來書寫css的樣式，可以說幾乎都是需要什麼樣式就加什麼樣式，完全沒有考慮過樣式屬性書寫的順序對效能有什麼影響。我一直堅信，前端的效能優化都是從細節堆出來的，不注意css屬性的順序確實也可以實現我們需要的各種操作，但是慢慢的讓自己遵從最優的寫法，提高自己或者是優秀自己...