css常用书写顺序

1、属性顺序

 

　　  建议遵循以下顺序：

　　  同一 rule set 下的属性在书写时，应按功能进行分组，

　　  并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，

　　  以提高代码的可读性。

• Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
• Box Model 相关属性包括：border / margin / padding / width / height 等
• Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
• Visual 相关属性包括：background / color / transition / list-style 等

　　补充：

1. 布局定位属性：display / position / float / clear / visibility / overflow
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

         另外，如果包含 content 属性，应放在最前面

.demo {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

mozilla官方属性顺序推荐

2、CSS3浏览器私有前缀写法

CSS3 浏览器私有前缀在前，标准前缀在后

.demo {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

更多关于浏览器私有前辍写法：#Vendor-specific extensions

 3、其他

　　3.1 清除浮动

　　当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。 

　　触发 BFC 的方式很多，常见的有：

• float 非 none
• position 非 static
• overflow 非 visible

　　如希望使用更小副作用的清除浮动方法，参见 A new micro clearfix hack 一文。

　　另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。

　　3.2 !important

　　尽量不使用 !important 声明。

　　当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。

　　必须注意的是，仅在设计上 确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。

　　3.3 z-index

　　将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。

　　同层的多个元素，如多个由用户输入触发的 Dialog，在该层级内使用相同的 z-index 或递增 z-index。

建议每层包含100个 z-index 来容纳足够的元素，如果每层元素较多，可以调整这个数值。

　　在可控环境下，期望显示在最上层的元素，z-index 指定为 999999。

　　可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部第三方的产品引用。

不建议取值为 2147483647。以便于自身产品线被其他产品线引用时，当遇到层级覆盖冲突的情况，留出向上调整的空间

　　在第三方环境下，期望显示在最上层的元素，通过标签内联和 !important，将 z-index 指定为 2147483647。

　　第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式定义覆盖，需要采用此做法。