如何基于现有CSS样式创建变体？以调整letter-spacing为例

针对你想复用现有p.text样式、仅修改字间距的需求，推荐两种简单高效的方法，避免重复写冗余代码：

方法1：添加额外类名（最常用） #

保留原有的基础样式，新增一个仅包含需要修改属性的类，然后在HTML标签上同时应用两个类，实现样式叠加。

CSS代码： #

/* 原有基础样式 */
p.text {
    font-size: 0.75em;
    text-align: left;
    line-height: 1.8em;
    letter-spacing: 0.1em;
    font-family: sans-serif;
}

/* 字间距变体样式：仅覆盖需要修改的属性 */
.text-wide-spacing {
    letter-spacing: 0.2em;
}

（如果只想让这个变体类作用在p标签上，可以写成p.text-wide-spacing，但通用类的适用范围更广）

HTML代码： #

<p class="text text-wide-spacing">这里是使用变体样式的文本</p>

方法2：使用CSS变量（更灵活） #

把需要修改的属性定义成CSS变量，变体类只需要覆盖变量值即可，适合未来可能调整多个属性的场景。

CSS代码： #

p.text {
    font-size: 0.75em;
    text-align: left;
    line-height: 1.8em;
    --custom-letter-spacing: 0.1em; /* 定义自定义变量 */
    letter-spacing: var(--custom-letter-spacing);
    font-family: sans-serif;
}

/* 变体类：仅修改变量值 */
p.text.text-wide-spacing {
    --custom-letter-spacing: 0.2em;
}

HTML代码： #

<p class="text text-wide-spacing">这里是使用CSS变量实现的变体文本</p>

为什么这两种方法更好？ #

• 完全复用基础样式的所有属性，不用重复编写font-size、line-height等代码
• 后续如果修改基础样式（比如调整字体大小），所有变体样式都会同步更新，减少维护成本
• 类名语义化，一眼就能看懂变体的作用

内容的提问来源于stack exchange，提问作者Thomas Kyhn