CSS规则font-variant:small-caps与text-transform:lowercase共存是否合理？

首先明确实际渲染逻辑：浏览器里最终生效的小型大写效果，是因为这两个属性的执行顺序是先执行text-transform: lowercase把所有文本转成小写，再执行font-variant: small-caps将小写文本转换为小型大写字母。

这个写法的设计问题 #

从常规开发角度看，这个规则确实存在设计瑕疵：

• 冗余：要实现基础的小型大写效果，单独使用font-variant: small-caps就足够，额外添加text-transform: lowercase属于多余代码，增加了理解成本。
• 易混淆：两个属性的字面效果看起来矛盾，后续维护代码的开发者容易产生困惑，甚至可能误改导致样式异常。

合理适用场景 #

虽然写法绕，但确实存在特定场景需要这种组合：

• 统一小型大写样式：如果原始文本中混合了大小写字母，单独使用font-variant: small-caps会保留原本的大写字母（显示为正常大写），仅将小写转小型大写；而先通过text-transform: lowercase把所有字母统一转成小写，再用small-caps转换，就能让所有字母都呈现为一致的小型大写，没有大小写区分的差异。
  比如原始文本是"PERsonA"，仅用small-caps会显示为"PERsonA"（PER为正常大写，sonA为小型大写）；加上lowercase后，会先转成"persona"再转小型大写，最终所有字母都是统一的小型大写样式。

内容的提问来源于stack exchange，提问作者Sander Smith