修饰符应使用语义化命名如--emphasis、--error，而非视觉值--bold、--red；需解耦字体粗细与颜色，支持平级叠加；修饰符须完整声明状态，同步调整line-height等依赖属性；响应式应由布局类或clamp()控制，而非--mobile等设备修饰符。
修饰符不能叫 --bold 或 --red，这是硬编码视觉值
直接用 --bold 或 --red 命名修饰符，等于把样式细节写死进类名里。一旦设计系统换主题（比如暗色模式下“红色”实际是 color-error Token），所有 HTML、JS 和 CSS 都得跟着改——el.classList.contains('text--red') 在业务逻辑里毫无意义，也无法被自动化工具识别。
真正该表达的是语义角色：--emphasis 表示强调文本，--error 表示错误态，--success 表示成功反馈。颜色和粗细只是这些状态在当前主题下的视觉实现，由 CSS 变量或 Token 控制，不暴露给类名。
- 禁止：
.text--bold、.label--red、.btn--blue - 推荐：
.text--emphasis、.label--error、.btn--primary - 设计系统已有
color-error，就别再让类名重复定义“红色”
字体粗细和颜色必须解耦，用独立修饰符组合
BEM 允许修饰符叠加，但每个修饰符只负责一个维度的状态。比如既要强调又要标错，就写 text--emphasis text--error，而不是 text--emphasis-error —— 后者语义模糊，且无法单独开关。
这种平级叠加方式让 CSS 更易维护：你可以只改 text--error 的 color 和 font-weight，不影响其他修饰符；JS 也能安全判断 el.classList.contains('text--error') 来触发校验逻辑。
立即学习“前端免费学习笔记（深入）”；
- 正确：
<p class="form__hint text--emphasis text--warning"> - 错误：
<p class="form__hint text--emphasis-warning">（嵌套式命名，语义断裂） - 错误：
<p class="form__hint text--bold text--red">（视觉值命名，不可维护）
如何让 text--emphasis 真正生效而不污染继承链
很多人写了 .text--emphasis { font-weight: bold; } 就完事，结果发现文字行高塌陷、上下偏移。这是因为只改了单一属性，没同步处理依赖项。BEM 修饰符不是“补丁”，而是完整状态声明。
基础类必须提供合理默认值，修饰符只覆盖必要部分，并显式继承关键值。尤其注意 line-height、vertical-align 和 font-size 的协同变化。
.text {
font-size: 1rem;
line-height: 1.5;
font-weight: 400;
}
.text--emphasis {
font-weight: 600;
line-height: 1.4; /* 显式重设，避免因加粗导致行高撑开 */
}- 禁用
em单位定义字体大小，它会随父级缩放失控；优先用rem或clamp() - 不要在块容器上设
font-size（如.card { font-size: 14px; }），否则所有子元素的em都会被污染 - 修饰符若影响布局（如加粗后宽度变大），需同步控制
width或flex-shrink，否则在弹性容器中可能溢出
响应式字体大小不能靠 --mobile 这类修饰符解决
写 .text--mobile 是反模式。BEM 不处理媒体查询逻辑，它只定义结构关系。设备断点应由容器或布局类控制，比如 .layout--compact 触发整体密度调整，再让 .text 响应这个状态。
真正需要区分交互场景时，用 --touch 或 --keyboard 这类稳定维度修饰符，比 --mobile 更可靠——毕竟 iPad 可能横屏当桌面用，而折叠屏手机可能运行桌面版 Web 应用。
- 错误：
<span class="text--mobile">小字号</span> - 正确：
<div class="layout layout--compact"><span class="text">小字号</span></div> - 更优：
font-size: clamp(1rem, 2.5vw, 1.25rem);封装进基础类，不依赖修饰符
实际项目中最容易被忽略的，是修饰符与基础类之间的属性继承契约——不是“加粗就行”，而是“加粗后仍保持可读、对齐、不溢出”。一旦漏掉 line-height 或 vertical-align 的同步调整，问题会在嵌套组件中指数级放大。
