css樣式的書寫順序及原理——很重要！很重要！很重要！
為什麼重要？？？
概括講就是，它涉及了瀏覽器的渲染原理：reflow和repaint
還想知道更多為什麼可以參考：https://blog.csdn.net/qq_36060786/article/details/79311244
如何優雅解決？
開源比較流行的 CSS lint 方案：Csslint、SCSS-Lint、Stylelint
Stylelint 優點
- 其支持 Less、Sass 這類預處理器；
- 在社區活躍度上，有非常多的 第三方插件 ；
- 在 Facebook，Github，WordPress 等公司得到實踐，能夠覆蓋很多場景。
步驟一：安裝 stylelint 依賴
<code>npm install stylelint stylelint-config-recess-order stylelint-config-standard stylelint-order stylelint-scss/<code>
stylelint-scss
scss 拓展，增加支持 scss 語法
stylelint-order
該插件的作用是強制你按照某個順序編寫 css。例如先寫定位，再寫盒模型，再寫內容區樣式，最後寫 CSS3 相關屬性。這樣可以極大的保證我們代碼的可讀性。
stylelint-config-standard
作用：配置 Stylelint 規則。
官方的代碼風格 ：stylelint-config-standard。該風格是 Stylelint 的維護者汲取了 GitHub、Google、Airbnb 多家之長生成的。
stylelint-config-recess-order
stylelint-order 插件的第三方配置
步驟二：根目錄添加.stylelintrc.json 文件
配置方式：
- 在 package.json 中的 stylelint 屬性指定規則
- 在.stylelintrc 文件中指定，文件格式可以是 JSON 或者 YAML。也可以給該文件加後綴，像這樣：.stylelintrc.json,.stylelintrc.yaml,.stylelintrc.yml,.stylelintrc.js
- stylelint.config.js 文件，該文件 exports 一個配置對象 span>
按順序查找，以上三種方式任何一項有值，就會結束查找
在項目根目錄新建.stylelintrc.json 文件，複製以下內容
<code>module.exports = {
"extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
"rules": {
"at-rule-no-unknown": [true, {"ignoreAtRules" :[
"mixin", "extend", "content", "include"
]}],
"indentation": 4,
"no-descending-specificity": null // 禁止特異性較低的選擇器在特異性較高的選擇器之後重寫
}
}/<code>rules 優先級大於 extends，建議採用 extends 方式統一管理
配置文件中單獨配置 at-rule-no-unknown 是為了讓 Stylelint 支持 SCSS 語法中的 mixin、extend、content 語法。
片段禁用規則
<code>/* stylelint-disable */
/* （請說明禁止檢測的理由）前端組件限制類名 */
.cropper_topContainer .img-preview {
border: 0 none;
}
/* stylelint-enable *//<code>
fix 方式
- stylelint --fix 就能搞定
更多語法規則請參考：https://stylelint.io/user-guide/usage/cli
- webstorm 可以配置 external tools 實現 autofix，添加 keymap 快捷鍵，
如果希望在保存時自動 fix， 參考這裡https://blog.csdn.net/gyz718/article/details/70556188
步驟三：vscode 編輯器安裝插件
在應用商店搜索擴展並安裝：stylelint-plus、Vetur、Beautify
<code>"stylelint.autoFixOnSave": true, // 保存自動格式化
"vetur.format.defaultFormatter.html": "js-beautify-html", // 格式化模板
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned", // 第一個屬性後開始折行，並對齊
},/<code>
在 vscode 中安裝插件：stylelint-plus
當然也可以選擇普通的 stylelint 插件，不過 plus 版本有保存即 fix 的功能
使用
css 格式化：ctrl + s 自動修復
閱讀更多 WangXiui 的文章
