--transparent 是典型反模式，因它表达视觉结果而非业务状态，导致语义断裂、主题难切换、js 逻辑失焦；应改用 btn--disabled 等表意修饰符，并将 opacity 过渡声明于基础类。
不能用 --transparent 作为 BEM 修饰符。 它违反修饰符必须表达「状态或意图」而非「视觉结果」的核心原则，会导致语义断裂、主题不可替换、JS 无法安全响应。
为什么 --transparent 是典型反模式
透明度是实现手段，不是业务状态。比如一个按钮在禁用时变透明，真正要表达的是“不可交互”，而不是“当前 opacity 是 0.4”。一旦写成 btn--transparent：
- 换暗色模式时，可能需改名为
btn--faded，但所有 HTML、JS、测试用例都得同步改 - JS 逻辑变成
el.classList.contains('btn--transparent')—— 这无法回答“它为什么不可点？” - 设计系统里已有
--state-disabled-opacityToken，类名却硬编码值，维护脱节 - 同一个“禁用态”在不同组件中可能表现为透明、灰阶、模糊，
--transparent无法覆盖其他表现形式
该用什么替代 --transparent
根据实际语义选择修饰符，让 class 名本身可读、可测、可演进：
- 表示组件不可交互 → 用
btn--disabled（配合pointer-events: none和opacity） - 表示内容暂未加载完成 → 用
card--loading（可同时控制透明度、骨架屏、aria-busy） - 表示弹窗遮罩层已激活 → 用
modal__overlay--visible（透明度只是其视觉表现之一） - 表示某区域处于“静默”状态（如通知关闭后）→ 用
notification--muted，而非--transparent
透明度动画必须写在基础类上，不能只靠修饰符
如果想让元素从不透明到半透明有过渡，transition 必须声明在基础类，例如：
.modal__overlay {
opacity: 0;
transition: opacity 0.2s ease;
}
.modal__overlay--visible {
opacity: 0.5;
}
若只把 transition 写在 --visible 里，隐藏时会跳变——因为移除修饰符后，基础类没定义 transition，浏览器直接回退到初始值。
真需要快速调试透明度？别污染 BEM 命名空间
开发阶段临时看效果，直接用浏览器 DevTools 编辑 style="opacity: 0.3" 或临时加 data-debug-transparent 属性，再写一条独立的调试样式规则。上线前必须删掉——BEM 类名一旦提交，就是契约，不是草稿纸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
