StyleLint 中 CSS 标识符命名规范规则的演进与实践

背景介绍

在现代 CSS 开发中，随着各种新特性的引入，开发者需要管理的标识符类型越来越多。从传统的 @keyframes 动画名称到现代的 @layer 层级命名、@container 容器查询名称等，如何统一规范这些标识符的命名成为了团队协作中的重要课题。

现有规则分析

StyleLint 目前已经提供了一些针对特定标识符的命名规范检查规则：

1. custom-media-pattern：用于检查 @custom-media 规则的命名
2. keyframes-name-pattern：用于检查 @keyframes 动画名称的命名
3. custom-property-pattern：用于检查 CSS 自定义属性（变量）的命名

这些规则虽然有效，但存在两个主要问题：一是覆盖范围有限，二是规则分散，配置不够统一。

新规则讨论的进展

社区提出了创建一个更通用的标识符命名规范检查规则的设想，主要考虑以下两种实现方案：

方案一：统一规则

建议创建一个名为 at-rule-name-pattern 的高级规则，通过配置对象统一管理各类 at-rule 的命名规范：

{
  "at-rule-name-pattern": {
    "custom-media": "/^--foo-/",
    "keyframes": "/^foo-/",
    "layer": ["theme", "layout", "utilities"]    
  }
}

这种方案的优点在于配置集中，便于管理；缺点是实现复杂度高，需要考虑不同 at-rule 的语法差异。

方案二：分散规则

建议为每种标识符类型创建独立的规则，如：

• container-name-pattern
• layer-name-pattern

这种方案实现简单，但可能导致规则数量膨胀，随着 CSS 新特性的引入需要不断添加新规则。

技术挑战与考量

在实现这类规则时，开发团队需要特别关注以下技术细节：

1. 标识符类型识别：需要区分 CSS 规范中定义的关键字和开发者自定义的标识符
2. 语法上下文：不同位置的标识符可能有不同的命名要求（如 -- 前缀在某些场景是必须的）
3. 新特性兼容：规则需要能够适应 CSS 规范的持续演进

最佳实践建议

基于讨论结果，团队最终决定采用分散规则的实现策略，主要基于以下考虑：

1. 实现复杂度：分散规则更易于实现和维护
2. 灵活性：不同类型标识符可能有完全不同的命名要求
3. 渐进增强：可以按需逐步添加对新标识符类型的支持

对于实际项目中的 CSS 命名规范管理，建议：

1. 为关键标识符类型配置相应的命名规则
2. 统一团队的命名约定（如 BEM 方法论、特定前缀等）
3. 定期审查规则配置，确保与新 CSS 特性保持同步

未来展望

随着 CSS 规范的不断发展，StyleLint 团队将持续关注开发者对标识符命名规范的需求，适时引入新的检查规则或优化现有规则的实现方式，为前端开发者提供更强大的样式代码质量管理工具。