推荐css自动排序插件csscomb

代码是给人看的,计算机只是负责执行一下
为css属性排序, 让我们的代码更加简洁优雅

推荐的css书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其余(animation, transition等)

推荐一个可以自动为css属性排序的插件csscomb

• 最终效果,保存时自动排序

vscode配置

安装csscomb

配置csscomb

• 打开setting

• 开启配置

• 增加配置

  // csscomb为css排序  // csscomb 保存时,为css排序  "csscomb.formatOnSave": true,  // 使用自己设置排序风格, 官方推荐的三个: csscomb、yandex、zen  "csscomb.preset": {    "remove-empty-rulesets": true,    "always-semicolon": true,    "color-case": "upper",    "block-indent": "  ",    "color-shorthand": false,    "element-case": "lower",    "eof-newline": true,    "leading-zero": false,    "quotes": "single",    "sort-order-fallback": "abc",    "space-before-colon": " ",    "space-after-colon": " ",    "space-before-combinator": " ",    "space-after-combinator": " ",    "space-between-declarations": "\n",    "space-before-opening-brace": " ",    "space-after-opening-brace": "\n",    "space-after-selector-delimiter": " ",    "space-before-selector-delimiter": "",    "space-before-closing-brace": "\n",    "tab-size": true  }

如何DIY自己喜欢的css样式?

• 关于属性csscomb.preset的配置可以从官方给出的选项任选其一csscomb, zen, yandex,

"csscomb.preset" : "yandex"

• 也可以按照自己的习惯,通过{}进行配置(上方示例就是这种方法), 官方提供了一个工具, 只要答复相关问题, 即可以自动生成配置代码, 工具地址http://csscomb.com/config

  "csscomb.preset": {    "remove-empty-rulesets": true,    "always-semicolon": true,    "color-case": "upper",    "block-indent": "  ",    "color-shorthand": false,    "element-case": "lower",    "eof-newline": true,    "leading-zero": false,    "quotes": "single",    "sort-order-fallback": "abc",    "space-before-colon": " ",    "space-after-colon": " ",    "space-before-combinator": " ",    "space-after-combinator": " ",    "space-between-declarations": "\n",    "space-before-opening-brace": " ",    "space-after-opening-brace": "\n",    "space-after-selector-delimiter": " ",    "space-before-selector-delimiter": "",    "space-before-closing-brace": "\n",    "tab-size": true  }

• 推荐阅读:
  推荐大家使用的CSS书写规范、顺序
  如何规范 CSS 的命名和书写？

上一篇 目录 已是最后