如何用BEM规范实现多修饰符共存的按钮样式？

问题 #

作为HTML/CSS新手，学习BEM时遇到按钮样式冲突：

• 定义了基础button块，button--primary（主色调）和button--outline（轮廓型）两个修饰符
• 单独使用修饰符样式正常，但同时应用两个修饰符时，预期的蓝色边框+蓝色文本没有出现，实际是黑色边框+白色文本

原BEM代码：

.button {
    border: unset;
    padding: 4px 10px 4px 10px;
}

.button--primary {
    background-color: blue;
    color: white;
}

.button--outline {
    background-color: transparent;
    border: 1px solid black;
}

对应的HTML：

<h1>using BEM</h1>
<button class="button">default</button>
<button class="button button--primary">primary</button>
<button class="button button--outline">outline</button>
<button class="button button--primary button--outline">primary outline</button>

尝试过用多类选择器解决，但不符合BEM规范；考虑过CSS变量但担心复杂场景下变量过多，寻求合适的解决方法。

解决方案 #

1. 为组合场景创建专属BEM修饰符 #

这是最贴合BEM规范的方案：针对primary+outline的组合，新增明确的修饰符button--primary-outline，直接定义该组合的样式，避免属性覆盖冲突。

修改后的CSS：

.button {
    border: unset;
    padding: 4px 10px;
}

.button--primary {
    background-color: blue;
    color: white;
}

.button--outline {
    background-color: transparent;
    border: 1px solid black;
    color: black;
}

/* 主色调轮廓按钮的专属样式 */
.button--primary-outline {
    background-color: transparent;
    border: 1px solid blue;
    color: blue;
}

对应HTML调整：

<button class="button button--primary-outline">primary outline</button>

这种方式逻辑清晰，样式优先级明确，完全符合BEM“一个修饰符对应一种状态/样式”的设计思路。

2. 用CSS变量统一管理样式属性 #

通过CSS变量拆分颜色、边框等属性，让修饰符只修改变量值，避免直接覆盖属性导致的冲突。

修改后的CSS：

.button {
    /* 定义基础变量 */
    --text-color: black;
    --bg-color: transparent;
    --border-color: black;
    --border-style: unset;
    
    border: var(--border-style);
    padding: 4px 10px;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.button--primary {
    /* 主色调变量 */
    --text-color: white;
    --bg-color: blue;
    --border-color: blue;
}

.button--outline {
    /* 轮廓型变量：透明背景+边框，文本颜色与边框一致 */
    --bg-color: transparent;
    --border-style: 1px solid var(--border-color);
    --text-color: var(--border-color);
}

此时同时应用button--primary和button--outline时，变量会自动合并：边框使用主色调的蓝色，文本颜色同步为蓝色，背景透明，完全符合预期。这种方式无需新增修饰符，也符合BEM规范，且变量可复用，适合扩展更多修饰符的场景。

3. 调整样式优先级（不推荐） #

如果不想新增修饰符或使用变量，可以通过调整样式顺序或增加选择器特异性来覆盖冲突属性，但这种方式不符合BEM的最佳实践，仅作为临时解决方案：

.button {
    border: unset;
    padding: 4px 10px;
}

.button--outline {
    background-color: transparent;
    border: 1px solid black;
    color: black;
}

.button--primary {
    background-color: blue;
    color: white;
}

/* 用更具体的选择器覆盖组合场景的样式 */
.button.button--primary.button--outline {
    border-color: blue;
    color: blue;
}

这种方式依赖选择器特异性，维护性较差，不推荐长期使用。

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