如何在CSS BEM中命名具有不同粗细和颜色的字体修饰符？-css教程-PHP中文网

修饰符应使用语义化命名如--emphasis、--error，而非视觉值--bold、--red；需解耦字体粗细与颜色，支持平级叠加；修饰符须完整声明状态，同步调整line-height等依赖属性；响应式应由布局类或clamp()控制，而非--mobile等设备修饰符。

如何在css bem中命名具有不同粗细和颜色的字体修饰符？

修饰符不能叫 --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') 来触发校验逻辑。

正确：
错误：（嵌套式命名，语义断裂）
错误：（视觉值命名，不可维护）

如何让 text--emphasis 真正生效而不污染继承链

很多人写了 .text--emphasis { font-weight: bold; } 就完事，结果发现文字行高塌陷、上下偏移。这是因为只改了单一属性，没同步处理依赖项。BEM 修饰符不是“补丁”，而是完整状态声明。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

基础类必须提供合理默认值，修饰符只覆盖必要部分，并显式继承关键值。尤其注意 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; /* 显式重设，避免因加粗导致行高撑开 */
}