Vue开发时让CSS属性按规则排序

CSS 属性的排序对浏览器的渲染性能影响很小,几乎可以忽略不计。浏览器在解析 CSS 时会创建内部的数据结构,不会被属性顺序影响。

不过,保持一致的 CSS 属性排序仍然有其他好处:

1. 提高代码可读性
2. 方便团队协作
3. 减少合并冲突

目前的经济大环境比较差，互联网公司新项目逐渐变少，维护项目的任务逐渐增多，而维护别人写的代码就可能就是常态性的任务，快速阅读和理解别人写的代码比自己写代码对开发者要求会更高，而统一整洁的代码风格更有利于维护和排查代码问题。

继上一篇《Vue开发时让Prettier与Eslint和谐相处》之后，唯独留下了css没有规范起来，这篇就来详细说一说。

1. 安装依赖

npm install --save-dev stylelint stylelint-config-standard stylelint-order stylelint-config-prettier --legacy-peer-deps

• stylelint是一个用于检测CSS代码风格的工具，不仅能处理style标签内的css，还可以处理template模板中的行内样式
• stylelint-config-standard是一种预设的stylelint配置规则集
• stylelint-order是一个用于规定CSS属性顺序的插件
• stylelint-config-prettier可以确保CSS代码的格式符合Prettier的代码风格规范，减少冲突

说明：

由于stylelint-config-prettier依赖stylelint("^16.7.0")的版本在 ">= 11.x < 15",这里加上--legacy-peer-deps，暂时忽略版本校验，你也可以降级stylelint版本以满足stylelint-config-prettier的要求。

2. 创建 Stylelint 配置文件

在项目根目录创建一个 Stylelint 配置文件 .stylelintrc.js：

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  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-prettier', '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 属性。

注意：

如果项目中没有postcss-html和postcss-scss,还需要手动安装

npm i postcss-html postcss-scss -D

4. 集成到 VS Code

如果你使用 VS Code，你可以安装 Stylelint 扩展，并在 settings.json 中添加以下配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  },
  "stylelint.validate": ["css", "scss", "vue"]
}

这样，每次保存文件时都会自动排序 CSS 属性。

注意：

这个开启后，会有非常多的css错误提示信息，目前还没找到怎么关闭所有校验提示，只保留属性排序。

5. Git 钩子

你可以使用 husky 和 lint-staged 在提交代码前自动运行 Stylelint：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{css,scss,vue}": [
      "stylelint --fix"
    ]
  }
}