整理推荐的CSS属性书写顺序

关注

原创最新推荐文章于 2025-09-05 12:15:22 发布 7.5k 阅读 AI 写同款· GEO 优化 ›

下载igv报错：Error loading genome hg38raw.githubusercontent.com...如何解决？ 🏆本文收录于《全栈 Bug 调优（实战版）》专栏。专栏聚焦真实项目中的各类疑难 Bug，从成因剖析 → 排查路径 → 解决方案 → 预防优化全链路拆解，形成一套可复用、可沉淀的实战知识体系。无论你是初入职场的开发者，还是负责复杂项目的资深工程师，都可以在这里构建一套属于自己的「问题诊断与性能调优」方法论，助你稳步进阶、放大技术价值。阅读详情

一. Mozilla 建议CSS规则

/* 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
 *
 */

详情请看http://www.mozilla.org/css/base/content.css

二.怿飞’s Blog细分为:

/*显示属性*/
display
list-style
position
float
clear

/*自身属性*/
width
height
margin
padding
border
background

/*文本属性*/
color
font
text-decoration
vertical-align
white-space
ohter text
content

在怿飞’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

规则示例:

.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: ;
}

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