- 书写顺序
- 1. 不强制要求声明的书写顺序。
- 2. 无前缀属性一定要写在最后
书写顺序
1. 不强制要求声明的书写顺序。
如果团队规范有要求,建议使用工具来自动化排序,比如 CSScomb,或者使用 @wangjeaf 开发的 ckstyle
推荐以声明的特性作为分组,不同分组间保留一个空行,例如:
.dialog {
/* 定位 */
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* 盒模型 */
width: 500px;
height: 300px;
padding: 10px 20px;
/* 皮肤 */
background: #FFF;
color: #333;
border: 1px solid;
border-radius: 5px;
}
2. 无前缀属性一定要写在最后
由于 CSS 后面的属性会覆盖前面的,无前缀属性写在最后可以保证浏览器一旦支持了,则用标准的无前缀属性来渲染。
不推荐的写法:
.foo {
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-border-radius: 6px;
}
推荐的写法:
.foo {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}