CSS 表达式必须禁用，因其在每次重排重绘甚至滚动时反复执行 JS，导致严重性能瓶颈；现代浏览器已完全不支持，应直接删除并用 calc()、clamp()、媒体查询等原生方案替代。
现代浏览器已完全弃用 CSS 表达式（如 IE 时代的 width: expression(document.body.clientWidth + "px");），它会在每次重排、重绘甚至滚动时反复执行 JavaScript，造成严重性能瓶颈和主线程阻塞。因此，“避免使用”不是优化建议，而是必须遵守的底线——直接删除，不可保留或降级兼容。
为什么表达式必须禁用
表达式本质是内联 JS 执行，每帧可能触发数十次求值：
- 每次 DOM 尺寸变化（resize、scroll、动画帧）都会重新计算
- 无法被缓存或静态分析，打断浏览器样式解析流水线
- 在 Chrome/Firefox/Safari 中早已不支持，仅 IE6–IE9 识别，而这些浏览器已退出主流生态
用标准 CSS 替代常见表达式场景
多数表达式想解决的问题，都有更稳定、高性能的原生方案：
-
动态宽度/高度 → 改用
width: 100vw;、height: 100dvh;、minmax(0, 1fr)或fit-content -
根据父容器自适应字号 → 使用
clamp(1rem, 2.5vw, 1.5rem)或font-size: 1rem;配合scale或transform -
条件显示/隐藏 → 用
:has()（现代支持）、:target、[data-state="open"]配合类名切换，而非运行时判断 -
响应式背景或颜色 → 用
@media、@supports或prefers-color-scheme媒体查询
检查与清理残留表达式
若项目中存在历史遗留代码，需主动排查：
立即学习“前端免费学习笔记（深入）”；
- 全局搜索
expression(、expression:（注意冒号写法也存在） - 用 Chrome DevTools 的 **Coverage 面板**加载页面，查看是否有含
expression的 CSS 被加载但未生效（通常标为灰色） - 构建流程中加入正则扫描脚本，例如：
grep -r "expression(" src/ --include="*.css"
替代方案优先级建议
当需要“动态样式逻辑”时，按性能从高到低排序：
- 纯 CSS：媒体查询、CSS 自定义属性、
calc()、clamp()、:has()、:is() - CSS + 少量 JS：仅在必要时机（如 resize 结束后）批量更新
style或 class，避免读写交替 - 完全规避：用结构化 HTML + class 控制状态（如
<div class="card card--expanded">），样式全由类驱动 </div>
