Stylelint中shorthand-property-no-redundant-values规则的新配置选项

在CSS开发中，使用简写属性(shorthand properties)是一种常见的优化手段。Stylelint的shorthand-property-no-redundant-values规则旨在帮助开发者避免使用冗余的简写属性值。最近，社区针对该规则提出了一个有趣的改进建议，允许开发者更灵活地控制简写属性的使用方式。

背景与问题

CSS简写属性允许开发者用更简洁的方式设置多个相关属性。例如，margin属性可以同时设置四个方向的外边距。根据CSS规范，当某些方向的值相同时，可以使用更短的写法：

• 四个值：margin: top right bottom left;
• 三个值：margin: top right-and-left bottom;
• 两个值：margin: top-and-bottom right-and-left;
• 一个值：margin: all-sides;

当前shorthand-property-no-redundant-values规则会标记那些可以使用更短写法的属性值。例如，inset: auto 0 0 0;会被标记为可以使用inset: auto 0 0;替代，因为最后一个0值可以通过简写规则推断出来。

然而，许多开发者认为在某些情况下，使用完整的四个值虽然技术上冗余，但能提高代码的可读性和明确性。特别是在团队协作中，明确的四个值可以减少理解成本。

解决方案

经过社区讨论，决定为规则添加一个新的ignore选项配置，名为four-into-three-edge-values。这个选项允许开发者禁用对那些可以从四个值简化为三个值的边缘属性的检查。

具体来说，当配置为：

{
  "rules": {
    "shorthand-property-no-redundant-values": [true, {
      "ignore": ["four-into-three-edge-values"]
    }]
  }
}

规则将不会对以下情况发出警告：

.example {
  margin: 10px 20px 30px 20px; /* 可以简化为 margin: 10px 20px 30px; */
  padding: 0 10px 0 10px;      /* 可以简化为 padding: 0 10px; */
}

注意，这个选项只影响那些可以简化为三个值的边缘属性，对于可以进一步简化为两个值或一个值的情况，规则仍然会发出警告。

技术考量

这个改进方案经过了仔细的技术讨论：

1. 命名选择：最初考虑过three-value-shorthands和four-to-three-values等名称，但最终选择了four-into-three-edge-values以更准确地描述其功能范围。

2. 适用范围：明确区分边缘属性(如margin、padding)和角属性(如border-radius)，未来可能会为角属性添加单独的配置选项。

3. 规范一致性：完全遵循CSS规范中关于简写属性值的处理规则，确保不会破坏样式表的实际渲染效果。

实际应用建议

对于团队项目，建议根据以下因素决定是否启用此选项：

1. 代码可读性：如果团队成员普遍认为四个值的形式更易理解，可以考虑启用。

2. 代码一致性：确保团队内部对简写属性的使用方式达成一致。

3. 性能考量：虽然四个值的写法会略微增加文件大小，但在现代构建工具下这种差异通常可以忽略。

这个改进体现了Stylelint在保持代码质量的同时，也尊重开发者对代码可读性和表达明确性的需求，展现了开源项目在规则严格性和灵活性之间的平衡艺术。