CSS 属性的排序对浏览器的渲染性能影响很小,几乎可以忽略不计。浏览器在解析 CSS 时会创建内部的数据结构,不会被属性顺序影响。
不过,保持一致的 CSS 属性排序仍然有其他好处:
提高代码可读性
方便团队协作
减少合并冲突
目前的经济大环境比较差，互联网公司新项目逐渐变少，维护项目的任务逐渐增多，而维护别人写的代码就可能就是常态性的任务，快速阅读和理解别人写的代码比自己写代码对开发者要求会更高，而统一整洁的代码风格更有利于维护和排查代码问题。
1. 安装依赖
npm install --save-dev stylelint stylelint-config-standard stylelint-order
stylelint是一个用于检测CSS代码风格的工具，不仅能处理style标签内的css，还可以处理template模板中的行内样式stylelint-config-standard是一种预设的stylelint配置规则集stylelint-order是一个用于规定CSS属性顺序的插件
2. 创建 Stylelint 配置文件
在项目根目录创建一个 Stylelint 配置文件 .stylelintrc.js：
module.exports = {
extends: ['stylelint-config-standard'],
plugins: ['stylelint-order'],
rules: {
'order/properties-alphabetical-order': true, //按照字母顺序排列
// 或者使用更复杂的自定义排序规则：
// 'order/properties-order': [
// 'position',
// 'top',
// 'right',
// 'bottom',
// 'left',
// 'display',
// 'align-items',
// 'justify-content',
// 'float',
// 'clear',
// 'overflow',
// 'overflow-x',
// 'overflow-y',
// 'margin',
// 'margin-top',
// 'margin-right',
// 'margin-bottom',
// 'margin-left',
// 'padding',
// 'padding-top',
// 'padding-right',
// 'padding-bottom',
// 'padding-left',
// 'width',
// 'min-width',
// 'max-width',
// 'height',
// 'min-height',
// 'max-height',
// 'font-size',
// 'font-family',
// 'font-weight',
// 'text-align',
// 'text-transform',
// 'text-decoration',
// 'line-height',
// 'letter-spacing',
// 'color',
// 'background',
// 'background-color',
// 'background-image',
// 'background-repeat',
// 'background-position',
// 'border',
// 'border-top',
// 'border-right',
// 'border-bottom',
// 'border-left',
// 'border-radius',
// 'opacity',
// 'filter',
// 'list-style',
// 'outline',
// 'visibility',
// 'z-index',
// 'box-shadow',
// 'text-shadow',
// 'resize',
// 'transition'
// ],
},
overrides: [
{
files: ['*.vue', '**/*.vue'],
customSyntax: 'postcss-html'
},
{
files: ['*.scss', '**/*.scss'],
customSyntax: 'postcss-scss'
}
]
};
如果你对自定义排序规则觉得太麻烦，没关系，Stylelint 确实有内置的 CSS 属性排序规则，但它并不是默认启用的。你可以使用 stylelint-config-recess-order 插件来实现这个功能。这个插件提供了一个预定义的 CSS 属性排序顺序，基于 Twitter 的 RECESS 项目。 在使用的过程中，它不仅仅会对css属性排序，他对vue中的方法也会按照一定规则进行排序。
以下是如何在你的项目中设置它：
首先，安装 stylelint-config-recess-order 插件：
npm install --save-dev stylelint-config-recess-order
然后，在你的 .stylelintrc.js 文件中添加这个配置。如果你还没有这个文件，可以创建一个。以下是一个基本的配置示例：
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],
plugins: ['stylelint-order'],
rules: {
'order/properties-alphabetical-order': true
// 或者使用更复杂的排序规则：
// 'order/properties-order': ['position', 'top', 'right', 'bottom', 'left', 'display', 'align-items', 'justify-content', 'float', 'clear', 'overflow', 'overflow-x', 'overflow-y', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'font-size', 'font-family', 'font-weight', 'text-align', 'text-transform', 'text-decoration', 'line-height', 'letter-spacing', 'color', 'background', 'background-color', 'background-image', 'background-repeat', 'background-position', 'border', 'border-top', 'border-right', 'border-bottom', 'border-left', 'border-radius', 'opacity', 'filter', 'list-style', 'outline', 'visibility', 'z-index', 'box-shadow', 'text-shadow', 'resize', 'transition']
},
overrides: [
{
files: ['*.vue', '**/*.vue'],
customSyntax: 'postcss-html'
},
{
files: ['*.scss', '**/*.scss'],
customSyntax: 'postcss-scss'
}
]
};
3. 在 package.json 中添加 script：
{
"scripts": {
"format:stylelint": "stylelint --fix src/**/*.{vue,css,scss}"
}
}
现在，你可以运行 npm run format:stylelint 来排序 CSS 属性。
npm i postcss-html postcss-scss -D
4. 集成到 VS Code
如果你使用 VS Code，你可以安装 Stylelint 扩展，并在 settings.json 中添加以下配置：
{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": "explicit"
},
"stylelint.validate": ["css", "less", "scss", "vue"]
}
这样，每次保存文件时都会自动排序 CSS 属性。
如果提示一些错误信息，并且不想修复这些无关紧要的错误信息，我们可以在rules中配置为禁用
rules: {
'selector-pseudo-element-no-unknown': null
}
配置完毕后，需要重启vscode才能生效，目前我这是这个情况
5. Git 钩子
你可以使用 husky 和 lint-staged 在提交代码前自动运行 Stylelint：
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{css,less,scss,vue}": ["stylelint --fix"]
}
}
