CSS样式写作的规则？css样式的书写顺序和原则——非常重要，非常重要。先说css样式写作的规则。让我们一起来认识和探讨这个问题吧！

CSS样式写作规则

CSS样式的书写顺序和原则——非常重要！非常重要！非常重要！

为什么重要？？？

总结一下，涉及到浏览器的渲染原理:reflow和repaint。

还想了解更多为什么可以参考:https://blog.csdn.net/qq_36060786/article/details/79311244.

如何优雅地解决？

开源流行的Csslint方案:CSS lint、SCSS-Lint、Stylelint。

style lint的优点

其支持 Less、Sass 这类预处理器；在社区活跃度上，有非常多的 第三方插件 ；在 Facebook，Github，WordPress 等公司得到实践，能够覆盖很多场景。

步骤一：安装 stylelint 依赖

npm安装样式lint样式lint-config-recess-order样式lint-config-standard样式lint-order样式lint-scss

stylelint-scss

scss扩展，增加了对scss语法的支持。

样式lint-顺序

这个插件的作用就是强迫你按照一定的顺序写css。比如先写定位，再写盒子模型，再写内容区域样式，最后写CSS3相关属性。这可以极大地保证我们代码的可读性。

stylelint-config-标准

角色:配置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.jsstylelint.config.js 文件，该文件 exports 一个配置对象 span>

按顺序搜索。如果上述三个方法中的任何一个有值，搜索将结束。

在项目根目录下新建一个stylelintrc.json文件，复制以下内容。

module . exports = { & # 34；延伸& # 34；: ["stylelint-config-standard & # 34；, "stylelint-config-recess-order & # 34；]， & # 34；规则& # 34；:{ & # 34；at-rule-no-unknown & # 34；:[真的，{ & # 34；ignoreAtRules & # 34:[ & # 34；mixin & # 34, "扩展& # 34；, "内容& # 34；, "包括& # 34； ]}]， & # 34；缩进& # 34；:4、 & # 34；无下降特异性& # 34；:null //禁止特异性较低的选择器在特异性较高的选择器之后重写 } }。

规则的优先级大于扩展，建议采用扩展的方式进行统一管理。

在 配置文件中单独配置At-rule-no-unknown是为了让Stylelint支持SCSS语法中的mixin、extend和content语法。

片段禁用规则

/* stylelint-disable */ /* （请说明禁止检测的理由）前端组件限制类名 */ .cropper_topContainer .img-preview { border: 0 none; } /* stylelint-enable */ /* stylelint-disable */ /*(请说明禁止检测的原因)前端组件限制类名*/ 。cropper _ top container . img-preview { border:0 none； } /* stylelint-enable */

修复模式

stylelint --fix 就能搞定

更多语法规则请参考https://stylelint.io/user-guide/usage/cli.

webstorm 可以配置 external tools 实现 autofix，添加 keymap 快捷键，

如果想在保存时自动修复，请参考https://blog.csdn.net/gyz718/article/details/70556188这里。

步骤三：vscode 编辑器安装插件

在App Store中搜索扩展并安装:stylelint-plus、Vetur、美化。

& # 34；stylelint.autoFixOnSave & # 34:true，//保存自动格式 & # 34；vetur . format . default formatter . html & # 34；: "js-美化-html & # 34；，//格式模板 & # 34；vetur . format . defaultformatteroptions & # 34；:{ & # 34；js-美化-html & # 34；:{ & # 34；wrap _ attributes & # 34: "强制对齐& # 34；，//在第一个属性后开始换行，并用 }对齐。

在vscode: stylelint-plus中安装插件。

当然你也可以选择普通的stylelint插件，但是plus版有保存修复的功能。

使用

css格式化:ctrl s自动修复。

,