The code is for people to see. The computer is only responsible for execution
Sorting css attributes makes our code more concise and elegant
Recommended css writing order
1. Location attribute (position, top, right, z-index, display, float, etc.)
2. Width, height, padding, margin
3. Text Series (font, line height, letter spacing, color - text align, etc.)
4. Background (background, border, etc.)
5. Others (animation, transition, etc.)
Recommend a plug-in csscomb that can automatically sort css properties
- Final effect, auto sort on save
vscode configuration
Install csscomb
Configure csscomb
- Open setting
- Open configuration
- Add configuration
// csscomb sorts css // Sort css when csscomb is saved "csscomb.formatOnSave": true, // Using the custom sorting style, three officially recommended: 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 }
How to DIY your favorite css style?
- For the configuration of attribute csscomb.preset, you can choose one of the official options csscomb, zen, yandex,
"csscomb.preset" : "yandex"
- You can also configure by {} according to your own habits (the above example is this way). The official provides a tool, which can automatically generate configuration code and tool address by answering relevant questions 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 }