前端规范-CSS属性那么多(杂)，怎么排序

前端就是“面向规范编程”， 可是 CSS 属性那么多(杂)， 怎么排序，好像没有一个标准的规范。

作为 3 年老前端， 刚开始写代码时我都是按照布局和样式，把属性一条一条往上加，直到达到我想要的效果就完了。

很明显，这样做不够“优雅”。

# 一、怎么排？

后来在各种项目里摸爬滚打了三年，我个人认为按 ‘属性类型’ 排序最实用。

div {
  /* 定位相关属性 */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom:0;
  left:0;

  /* 盒子模型相关属性 */
  display: inline-block;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

  /* 背景色 字体颜色 */
  background: #000;
  color: #fff

  /* 字体相关属性 */
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.5;
  text-align: right;

  /* 其它不常用属性 */
  cursor: pointer;
}

这么排序有以下几个好处

1. ‘重要的’ 影响页面结构的属性放前面， 可以引起足够重视。 试想一下你维护别人的 CSS 代码时， 看到某个类下面有 20 行属性，是不是看两行就跳过了。

2. 符合搭建页面的编码流程：我们写页面时，一般是 固定位置 -> 盒子模型相关控制排列规则 -> 背景色、字体颜色、字体相关属性 -> 加上一些特殊的不常用属性。如果 CSS 属性也按照开发顺序排列就会感觉很自然，很流畅。

3. 维护方便： 需要修改某个属性时，方便定位。

# 二、这么多属性顺序，硬背下来吗？

要在团队里推行这套规则光靠成员自觉把这些属性顺序背下来是不太可能的。

幸运的是 vscode 有一个插件可以完美解决需求。

CSScomb (opens new window)

插件市场搜索安装后在 setting.json 里加入下面配置

  "csscomb.preset": "zen" // 按照模板zen格式化

macOS 按 Cmd+Shift+P （ Windows Ctrl+Shift+P ） 执行 CSScomb

这样我的 Vue 文件里的 CSS 代码就自动排好序了

这个插件最赞的是，它可以自定义排序规则，官方提供了三种自定义规则 (opens new window)

如果你的团队想自定义某些规则，可以下载这个 JSON 模板，然后按需修改后，设置为个性化格式化模板。

它还有许多配置项如文件保存时自动排序， CSS 自定义规则格式化等等，可以在官网 (opens new window)查阅

注意： 一定要在 setting.json 里加入配置 "csscomb.preset": "zen"，插件才能生效， 因为它的默认值为"{}"。