本文作者：大象
本文地址：http://www.cnblogs.com/daxiang/p/4662034.html

以书写顺序来结束《无废话网页重构》系列，是最好不过的了，因为，动手实践是发现、总结和收获的最好途径。

一、基本排版规范

小写、单行、多行选择器用逗号分行、每属性分号分割、单引号、缩进；

二、选择器内属性的顺序和组织

• 影响文档流的属性（display, position, float, clear, visibility, table-layout）
• 自身盒模型的属性（width, height, margin, padding, border）
• 排版相关属性（font, line-height, text-align, text-indent, vertical-align）
• 装饰性属性（color, background, opacity, cursor）
• 生成内容的属性（content, list-style, quotes）
• CSS3属性：transform/transition/animation/box-shadow/border-radius
• 加浏览器前缀，按照 -webkit- / -moz- / -ms- / -o- / std的顺序，标准属性写在最后。

DEMO：

    el {
        display: ;
        visibility: ;
        float: ;
        clear: ;  

        position: ;
        top: ;
        right: ;
        bottom: ;
        left: ;
        z-index: ;  

        width: ;
        min-width: ;
        max-height-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: ;
        border-top: ;
        border-right: ;
        border-bottom: ;
        border-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: ;
        }  

某，用Excel打印了一份放办公桌边上了。

 参阅：

How do you order your properties within a declaration block?
规范 - NEC : 更好的CSS样式解决方案
ITeye：前端 CSS 规范大全
mozilla: CSS  Suggested order
需警惕CSS3属性的书写顺序
稳定、地道HTML书写原则

本文为原创文章，同时，某会更新知识点及修正错误，是以转载请务必保留原作者信息！
本文地址：
http://www.cnblogs.com/daxiang/p/4662034.html