17370845950

用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），给团队适应时间