Stylelint通过配置可复用规则集并集成到开发流程实现CSS规范统一，支持安装配置、适配项目需求、接入编辑器/提交/CI流程及持续维护。
用 Stylelint 统一 CSS 项目代码规范，核心是配置一套可复用、可维护的规则集，并将其集成到开发流程中。它不强制你用某种 CSS 写法，而是帮你把团队约定的风格落地为自动检查。
安装与基础配置
Stylelint 是基于 Node.js 的命令行工具，需先安装：
- 运行 npm install --save-dev stylelint stylelint-config-standard（推荐从标准配置起步）
- 在项目根目录新建 .stylelintrc.json，内容示例如下：
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": 2,
"string-quotes": "single",
"declaration-colon-space-after": "always",
"max-line-length": 100
}
}
这些规则会强制缩进为 2 空格、字符串用单引号、冒号后必须有空格、单行不超过 100 字符——都是常见协作约束。
适配项目实际需求
标准配置只是起点，真实项目常需调整。比如：
立即学习“前端免费学习笔记（深入）”；
- 用 CSS-in-JS 或 Vue SFC？加装 stylelint-config-recommended-vue 并在配置中扩展
- 团队要求 BEM 命名？启用 selector-class-pattern 规则，正则写成 "^[a-z][a-zA-Z0-9]+(__[a-z][a-zA-Z0-9]+)?(--[a-z][a-zA-Z0-9]+)?$"
- 禁用 !important？开启 declaration-no-important 规则
每条规则都有明确文档说明，建议按需启用，避免一次性打开过多导致大量报错影响推进节奏。
接入开发与构建流程
校验要真正起作用，得让它出现在开发者“顺手”的位置：
- 编辑器实时提示：VS Code 安装 Stylelint 插件，打开 CSS/SCSS 文件即可看到波浪线提示
- 提交前拦截：用 Husky + lint-staged，在 git commit 前自动检查暂存区的样式文件
- CI 检查：在 GitHub Actions 或 GitLab CI 中添加 npx stylelint "**/*.{css,scss,vue}" 步骤，失败则阻断合并
这样从写代码到上线，规范始终在线，而不是靠人工 Review 补漏。
持续维护与团队对齐
规则不是设好就一劳永逸。建议：
- 把 .stylelintrc.json 提交进仓库，确保所有人用同一套配置
- 新规则上线前，先用 --fix 自动修复能处理的问题，再人工 review 剩余项
- 定期组织一次“规则回顾”，根据实际踩坑或设计系统升级，增删调整规则
统一规范的本质，是降低协作成本。Stylelint 不是加锁，而是铺路。
