码迷,mamicode.com
首页 > Web开发 > 详细

无废话网页重构系列——(9)习惯:书写顺序

时间:2015-07-20 19:01:10      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:

本文作者:大象
本文地址: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

无废话网页重构系列——(9)习惯:书写顺序

标签:

原文地址:http://www.cnblogs.com/daxiang/p/4662034.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!