BEM修饰符应紧耦合于块/元素名、显式声明且禁止通配匹配，须枚举合法值、避免伪类冲突，并通过工具链和类型约束保障语义一致性与可维护性。
用 BEM 修饰符写组件变体，别直接改 class 名字
很多人一想“换风格”，就去手动增删 btn--primary、btn--ghost 这类类名，结果逻辑散在 JS 里，样式难定位，还容易漏掉状态同步。BEM 修饰符的核心作用不是“多写几个 class”，而是把「变体」声明为同一组件的合法状态，让 HTML、CSS、JS 对齐语义。
实操建议：
- 修饰符必须和块名或元素名紧耦合，比如
card--highlighted合法，highlighted-card就破坏了 BEM 约束，后续无法通过选择器批量控制 - 一个组件只用一套修饰符命名空间，避免混用
--size-large和--lg，否则维护时根本猜不出哪些是等价变体 - 不要用修饰符覆盖基础样式以外的逻辑，比如
input--disabled可以关掉边框和背景，但不该在里面加pointer-events: none—— 那是交互层该管的事
:is() 和 [class*="--"] 都不能替代修饰符语义
有人图省事，在 CSS 里写 .btn:is(.btn--primary, .btn--ghost) { ... } 或者用属性选择器匹配 [class*="--"] 来统一收口。这看似减少了重复，实际埋了三个坑：
常见错误现象：组件加了 btn--loading，但样式没生效，查半天发现是 :is() 里漏写了；或者某处误加了 icon--sm 到按钮上，结果触发了意外样式。
实操建议：
- 修饰符必须显式声明在 CSS 中，哪怕只是继承基础样式：
.btn--primary { background-color: #007bff; }，不能靠选择器“碰巧”命中 - 禁止用通配类名（如
[class^="btn--"]）做样式分发，它会污染非预期节点，比如第三方库的 DOM 里恰好有类似 class - 构建时若需压缩修饰符体积，优先用 PostCSS 插件做静态分析，而不是运行时靠 JS 拼字符串塞 class
React/Vue 中传 variant prop 时，别在组件内拼 className
写 className={`btn btn--${variant}`} 看似直白，但一旦变体增多（比如还要支持 size、theme、state），字符串拼接立刻失控，且无法做编译期校验。
使用场景：按钮要同时支持 variant="outline"、size="sm"、disabled 三种控制维度。
实操建议：
- 用对象映射代替字符串拼接：
const modifiers = { variant: `btn--${props.variant}`, size: `btn--${props.size}` };，再用clsx或class-variance-authority这类工具做条件合并 - 所有合法修饰符值必须提前枚举，避免运行时传入
variant="pimary"（拼错）导致样式丢失却无提示 - 如果项目用 TypeScript，给
variant加as const类型约束，比如type Variant = "primary" | "ghost" | "outline";
伪类和修饰符共存时，优先级容易翻车
.btn--primary:hover 看起来没问题，但当组件同时有 btn--primary 和 btn--disabled 时，.btn--disabled:hover 依然会生效 —— 浏览器根本不关心“disabled”是不是语义上的禁用状态。
性能 / 兼容性影响：部分老项目用 !important 强制覆盖，结果导致暗色模式切换、动画过渡等场景样式打架。
实操建议：
- 禁用纯伪类控制状态样式，把
:hover、:focus等逻辑下沉到具体修饰符中，比如写.btn--primary:hover和.btn--disabled:hover两个独立规则，并确保后者明确重置所有交互相关属性 - 对真正不可交互的节点，除了加
btn--disabled，必须同步设置disabled属性（原生控件）或aria-disabled="true"（自定义控件），否则辅助技术无法识别 - 用
@layer组织修饰符样式层级，把基础态、变体态、状态态（hover/focus/active）分层，避免靠权重硬刚
修饰符不是语法糖，它是把设计系统里的“风格选项”翻译成可预测、可测试、可搜索的 CSS 接口。最常被忽略的点是：修饰符名一旦定稿，就不能靠“视觉差不多”随意新增，每个新加的 --xxx 都得回答清楚——它解决的是哪类用户场景？是否和现有变体正交？有没有对应的交互反馈？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
