推薦css自動排序外掛csscomb
摘要：
程式碼是給人看的,計算機只是負責執行一下
為css屬性排序能讓我們的程式碼更加簡潔優雅
推薦的css書寫順序
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, ...
程式碼是給人看的,計算機只是負責執行一下
為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
}