书写顺序

优质

小牛编辑

132浏览

2023-12-01

书写顺序

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