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

参考:Web项目的CSS文件结构组织及属性编写


摘要:

影响文档流的属性(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的顺序,标准属性写在最后。


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


How do you order your properties within a declaration block?


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值