整理推荐的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/

http://blog.csdn.net/sykent/article/details/7862172