CSS 规范配置：Standard vs Recommended vs Sass vs Idiomatic

在大型前端项目中，保持 CSS 代码的一致性至关重要。stylelint 提供了多种共享配置包，但它们的定位和适用场景各不相同。stylelint-config-standard、stylelint-config-recommended、stylelint-config-idiomatic-order 和 stylelint-config-sass-guidelines 分别解决了不同层面的问题。让我们深入对比它们的核心差异。

🎯 核心定位：错误检查 vs 风格规范 vs 预处理器

stylelint-config-recommended 专注于“ correctness ”（正确性）。

• 只开启那些能捕获明显错误（如无效单位、重复属性）的规则。
• 不包含任何关于代码风格（如缩进、引号）的规定。
• 适合作为其他配置的基石。

// .stylelintrc.json
{
  "extends": ["stylelint-config-recommended"]
}

stylelint-config-standard 专注于“ consistency ”（一致性）。

• 包含 recommended 的所有规则。
• 增加了常见的风格规范（如颜色写法、选择器格式）。
• 适合大多数纯 CSS 项目，开箱即用。

// .stylelintrc.json
{
  "extends": ["stylelint-config-standard"]
}

stylelint-config-idiomatic-order 专注于“ order ”（顺序）。

• 专门控制 CSS 属性的书写顺序（如定位属性在前，盒模型在后）。
• 依赖 stylelint-order 插件。
• 适合对代码排序有执念的团队。

// .stylelintrc.json
{
  "extends": ["stylelint-config-idiomatic-order"]
}

stylelint-config-sass-guidelines 专注于“ preprocessor ”（预处理器）。

• 针对 Sass/SCSS 语法的特定规则（如嵌套深度、变量命名）。
• 依赖 stylelint-scss 插件。
• 适合重度使用 Sass 功能的项目。

// .stylelintrc.json
{
  "extends": ["stylelint-config-sass-guidelines"]
}

🔌 依赖插件：内置 vs 外部安装

配置包是否需要额外安装插件是使用成本的关键因素。

stylelint-config-recommended 不需要额外插件。

• 仅使用 stylelint 核心规则。
• 安装最简单，冲突最少。

npm install --save-dev stylelint-config-recommended

stylelint-config-standard 不需要额外插件。

• 同样仅使用 stylelint 核心规则。
• 但规则数量更多，配置更严格。

npm install --save-dev stylelint-config-standard

stylelint-config-idiomatic-order 必须安装 stylelint-order。

• 核心功能依赖外部插件实现属性排序。
• 如果未安装插件，配置将失效。

npm install --save-dev stylelint-config-idiomatic-order stylelint-order

stylelint-config-sass-guidelines 必须安装 stylelint-scss。

• 核心功能依赖 SCSS 解析器。
• 无法用于纯 CSS 项目。

npm install --save-dev stylelint-config-sass-guidelines stylelint-scss

📏 规则覆盖范围：宽松 vs 严格

规则的数量和严格程度直接影响开发体验和代码质量。

stylelint-config-recommended 规则最少。

• 只防止代码出错。
• 允许自由定义风格。

// 示例：允许任意颜色格式
"color-no-invalid-hex": true

stylelint-config-standard 规则适中。

• 防止出错 + 统一风格。
• 强制使用标准写法。

// 示例：强制使用十六进制颜色
"color-hex-case": "lower"

stylelint-config-idiomatic-order 规则特定。

• 只关注属性顺序。
• 不关心颜色或缩进。

// 示例：强制 position 属性在前
"order/properties-order": ["position", "top", "right"]

stylelint-config-sass-guidelines 规则特定。

• 只关注 Sass 特性。
• 如嵌套深度限制。

// 示例：限制嵌套深度为 3
"max-nesting-depth": 3

🔄 组合使用：灵活搭配方案

这些配置包设计为可组合使用，以满足复杂需求。

方案 A：标准 CSS 项目

• 只用 standard。
• 简单直接，覆盖全面。

{
  "extends": ["stylelint-config-standard"]
}

方案 B：标准 CSS + 属性排序

• 组合 standard 和 idiomatic-order。
• 注意顺序，后者会覆盖前者的顺序规则。

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-idiomatic-order"
  ]
}

方案 C：Sass 项目

• 组合 standard 和 sass-guidelines。
• 确保安装了对应的 SCSS 插件。

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines"
  ],
  "plugins": ["stylelint-scss"]
}

方案 D：最小化错误检查

• 只用 recommended。
• 适合风格完全自定义的团队。

{
  "extends": ["stylelint-config-recommended"]
}

📊 总结对比表

💡 最终建议

stylelint-config-standard 是大多数项目的最佳起点 🚀。

• 它提供了错误检查和风格规范的平衡。
• 无需额外配置即可满足 90% 的需求。
• 适合 React、Vue 等现代框架的 CSS 模块或普通样式表。

stylelint-config-recommended 适合高度定制化的团队 🛠️。

• 如果你有自己的风格指南，只想要错误检查。
• 作为其他配置的底层依赖。

stylelint-config-sass-guidelines 仅限 Sass 项目 🎨。

• 如果你的项目重度依赖 Sass 嵌套和 mixin。
• 务必配合 stylelint-scss 使用。

stylelint-config-idiomatic-order 按需选用 📋。

• 如果团队对属性顺序有强烈偏好。
• 注意其更新频率较低，需测试兼容性。

核心原则：不要过度配置。从 standard 开始，如果有特殊需求（如 Sass 或属性排序），再叠加相应的配置包。保持配置简单 — 这样更容易维护，也能减少开发阻力。