应使用CSS变量统一管理opacity值并避免滥用，优先用rgba()处理颜色透明、opacity仅用于整块区域可见性控制，禁用态需配合pointer-events、aria-disabled等多重声明。
opacity值别直接写死在组件里
直接在每个组件里写 opacity: 0.7 看似简单，但改主题、切状态（比如禁用态）、做A/B测试时，得全局搜替换，漏一个就错位。更麻烦的是，opacity 会把整个元素及其子元素一起变透明，没法单独控制文字或图标——这不是“透明度管理”，是“透明度污染”。
实操建议：
- 用 CSS 变量统一声明，比如
:root { --opacity-disabled: 0.4; --opacity-hover: 0.9; } - 组件内只引用变量：
opacity: var(--opacity-disabled); - 禁用态优先用
pointer-events: none配合变量，避免靠 opacity “假装不可点” - 需要局部透明（比如只让背景透、文字不透），改用
background-color: rgba(0, 0, 0, 0.1)或color: rgba(0, 0, 0, 0.6)，别碰opacity
opacity和rgba的性能与语义区别不能混用
opacity 是渲染层操作，触发重绘（repaint）；rgba() 是颜色值，只影响该属性本身。浏览器对后者优化更好，尤其在动画或滚动中频繁变化时。opacity 还会把子元素继承透明度，而 rgba() 不会——这是语义差异，不是“效果一样就行”。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
opacity: 0.5后，里面图标字体也变淡，可读性下降 - 用
opacity做渐隐动画，滚动卡顿，DevTools 里看到大量 Composite Layers - 暗色模式切换时，
opacity值没变，但实际视觉灰度已偏移（因为底色变了）
实操建议：
- 纯颜色透明 → 用
rgba()或hsla()，支持 CSS 变量：color: hsla(var(--hue), var(--sat), var(--light), 0.7); - 整块区域开关可见性（如遮罩层）→ 用
opacity+ CSS 变量，但确保它没有深层嵌套内容 - 动画场景下，优先用
transform+opacity组合，避免触发布局（layout）
CSS变量控制opacity时要注意作用域泄漏
很多人在组件级样式里写 :host { --opacity-active: 0.8; }，结果被父组件或全局样式覆盖，或者反过来污染了其他组件。CSS 变量是继承+级联的，不是作用域封闭的“局部变量”。
使用场景：
- 主题包（dark/light）需批量切换多组透明度
- 同一组件在不同业务页有不同默认透明策略（如管理后台 vs 客户端）
- 配合 JS 动态注入主题变量（
document.documentElement.style.setProperty('--opacity-loading', '0.3')）
实操建议：
- 变量名带命名空间，比如
--btn-opacity-disabled而非--opacity-disabled - 在组件根选择器里用
:where()或:is()降权，防止被意外覆盖：.my-btn:where(*) { opacity: var(--btn-opacity-default, 1); } - JS 设置变量前先检查是否已定义：
if (getComputedStyle(document.documentElement).getPropertyValue('--btn-opacity-default') === '') { ... }
disabled状态别只靠opacity实现
仅用 opacity: var(--opacity-disabled) 实现禁用态，是视觉欺骗。它不阻止交互、不传达可访问性信息、键盘焦点仍能进入，屏幕阅读器也感知不到状态变化。
性能 / 兼容性影响：
- IE11 不支持 CSS 变量，但
opacity支持；如果必须兼容，得 fallback 到 class 切换（.btn--disabled { opacity: 0.4; }） - 部分安卓 WebView 对
opacity动画有闪烁，配合will-change: opacity可缓解，但不如用visibility+transition
实操建议：
- 禁用态必须同时设置：
opacity+pointer-events: none+tabindex: -1+aria-disabled="true" - 用属性选择器绑定：
button[disabled] { opacity: var(--btn-opacity-disabled); }，比 class 更可靠 - 若需过渡效果，用
transition: opacity 0.2s ease，但避免在:hover和[disabled]同时存在时冲突（hover 优先级更高）
opacity 就成了最省事也最危险的捷径。 
