css排序-CSS 属性如此之多（杂项），如何对它们进行排序？

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

后端是“面向标准的编程”，但CSS属性太多（复杂）css排序，而且似乎没有标准规范如何排序。

作为一个3岁的后端，刚开始写代码的时候，我根据布局和风格一一添加属性，直到达到我想要的效果。

显然，这并不“优雅”。

1、如何安排？

经过两年在各个项目的摸爬滚打css排序，我个人觉得按‘属性类型’排序是最实用的。

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

这种排序有以下优点

影响页面结构的“重要”属性放在其上方，可以引起足够的关注。 想象一下，当你维护别人的CSS代码时，你听说某个类下有20行属性。 读完之后你是否跳过了两行？

符合构建页面的编码流程：我们在编写页面时，通常是固定位置->包模型相关的控件排列规则->背景颜色、字体颜色、字体相关属性->加上一些特殊的不常见属性。 如果CSS属性也按照展开顺序排列的话，感觉会非常自然流畅。

维护方便：当某个属性需要改变时，可以很容易地定位到。

2、这么多的属性序列，你能强行记住吗？

仅仅依靠成员有意识地背诵这套属性顺序，是不可能在团队中执行这套规则的。

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

CSS梳

在插件市场搜索并安装后，在setting.json中添加以下配置

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

macOS 按 Cmd+Shift+P (Windows Ctrl+Shift+P) 执行 CSScomb

这样我的Vue文件中的CSS代码就被手动排序了。

这个插件最好的地方就是可以自定义排序规则。 官方提供了三种自定义规则。

如果您的团队想要自定义单独的规则，您可以下载此 JSON 模板，根据需要更改它，并将其设置为个性化的低级模板。

还有保存文件时手动排序、低级CSS自定义规则等很多配置项，可以在官网找到

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