整理推薦的CSS屬性書寫順序

一. Mozilla 建議CSS規則

<span style="font-family:Microsoft YaHei;">/* 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  
 *  
 */</span>

詳情請看http://www.mozilla.org/css/base/content.css

二.懌飛’s Blog細分爲:

<span style="font-family:Microsoft YaHei;">/*顯示屬性*/  
display  
list-style  
position  
float  
clear  
  
/*自身屬性*/  
width  
height  
margin  
padding  
border  
background  
  
/*文本屬性*/  
color  
font  
text-decoration  
vertical-align  
white-space  
ohter text  
content</span>

在懌飛’s Blog裏有個叫作inG的補充說這還和瀏覽器的解析過程有關：瀏覽器先對DOM定位，而後解析自身屬性，接着再解析內部對象。（沒找到相關的英文資料，有知情者還望告知）.

三. Andy Ford的細分

1.Display & Flow

2.Positioning

3. Dimensions

4. Margins, Padding, Borders, Outline

5. Typographic Styles

6. Backgrounds

7. Opacity, Cursors, Generated Content

 規則示例:

<span style="font-family:Microsoft YaHei;">.cl {  
    display: ;  
    visibility: ;  
    float: ;  
    clear: ;  
      
    position: ;  
    top: ;  
    right: ;  
    bottom: ;  
    left: ;  
    z-index: ;  
     
    width: ;  
    min-width: ;  
    max-width: ;  
    height: ;  
    min-height: ;  
    max-height: ;  
    overflow: ;  
  
    margin: ;  
    margin-top: ;  
    margin-right: ;  
    margin-bottom: ;  
    margin-left: ;  
  
    padding: ;  
    padding-top: ;  
    padding-right: ;  
    padding-bottom: ;  
    padding-left: ;  
  
    border-width: ;  
    border-top-width: ;  
    border-right-width: ;  
    border-bottom-width: ;  
    border-left-width: ;  
  
    border-style: ;  
    border-top-style: ;  
    border-right-style: ;  
    border-bottom-style: ;  
    border-left-style: ;  
  
    border-color: ;  
    border-top-color: ;  
    border-right-color: ;  
    border-bottom-color: ;  
    border-left-color: ;  
  
    outline: ;  
  
    list-style: ;  
  
    table-layout: ;  
    caption-side: ;  
    border-collapse: ;  
    border-spacing: ;  
    empty-cells: ;  
  
    font: ;  
    font-family: ;  
    font-size: ;  
    line-height: ;  
    font-weight: ;  
    text-align: ;  
    text-indent: ;  
    text-transform: ;  
    text-decoration: ;  
    letter-spacing: ;  
    word-spacing: ;  
    white-space: ;  
    vertical-align: ;  
    color: ;  
  
    background: ;  
    background-color: ;  
    background-image: ;  
    background-repeat: ;  
    background-position: ;  
  
    opacity: ;  
  
    cursor: ;  
  
    content: ;  
    quotes: ;  
}</span>

詳情可見http://fordinteractive.com/2009/02/order-of-the-day-css-properties/