代码是给人看的, 计算机只是负责执行一下
为 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
- }
来源: http://www.jianshu.com/p/1a1c12aade36