用stylelint建立可落地的CSS规范是最务实解法，涵盖属性顺序、单位、颜色、选择器复杂度等关键项，通过编辑器提示、提交拦截和CI卡点实现自动化约束，并同步规则变更。
团队 CSS 风格不统一，本质是缺乏可落地的规范和自动化约束。靠口头约定或 Code Review 事后纠正，效率低、易遗漏、难坚持。用 stylelint 建立统一、可执行、可集成的代码检查规则，是最务实的解法。
明确核心风格边界，不追求“完美统一”
不必强求所有人写法完全一致（比如单引号 vs 双引号在不影响功能时可放宽），重点守住影响协作与维护的关键项：
- 属性顺序（如 display → position → flex → margin → padding → border → color → font）
- 单位规范（0 不带单位，px/rem/em 有明确使用场景）
- 颜色写法（#fff 优先于 #ffffff，禁止内联 rgb/hsl 字符串）
- 选择器复杂度（禁止超过 3 层嵌套，禁用 ID 选择器）
- 空行与缩进（声明块之间空一行，2 空格缩进）
用 stylelint-config-standard + 团队定制规则
直接基于成熟配置起步，避免从零造轮子。推荐组合：
- 基础：安装
stylelint-config-standard（覆盖语法、格式、兼容性主流要求） - 增强：加
stylelint-config-rational-order统一属性顺序 - 定制：在
.stylelintrc.js中覆盖或新增规则，例如：
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-rational-order'
],
rules: {
'color-hex-length': 'short', // 强制 #fff
'declaration-block-semicolon-newline-after': 'always', // 分号后换行
'selector-max-id': 0, // 禁止 ID 选择器
'max-nesting-depth': 3 // 最大嵌套深度
}
};
接入开发流程，让规则“自动生效”
规则写得再好，不运行就等于没存在。必须嵌入日常环节：
立即学习“前端免费学习笔记（深入）”；
- 编辑器实时提示：VS Code 安装 Stylelint 插件，开启 “Auto Fix on Save”
-
提交前拦截：用 husky + lint-staged，在 git commit 前自动检查并修复（
stylelint --fix） -
CI 卡点：GitHub Actions / GitLab CI 中加入
npx stylelint \"src/**/*.{css,scss,vue}\"，失败则阻断合并
同步规则变更，避免“规则黑盒”
规则不是一次配置就高枕无忧。每次调整都要同步给所有人：
- 把
.stylelintrc.js提交进仓库，并在 README.md 的「开发规范」章节说明关键规则及修改原因 - 新规则上线前，用
stylelint --fix-dry-run预览影响范围，评估改造成本 - 允许阶段性过渡（如先 warn 后 error），给团队适应时间
