不能直接在bem修饰符里写background-clip: text，因其在ie11、旧版safari及部分安卓webview中不支持且无降级机制，会导致文字透明或回退默认色；必须用@supports包裹并提供fallback类。
为什么不能直接在 BEM 修饰符里写 background-clip: text
因为这个属性在 IE11、旧版 Safari 和部分安卓 WebView 中不被支持，且无降级机制——BEM 类名本身没问题，但修饰符触发的样式会静默失效，导致文字变透明或回退到默认色。更麻烦的是，它常和 color、background-image 组合使用，一旦其中一个断掉，整个视觉就崩了。
常见错误现象：.heading--gradient 在开发环境看着正常，上线后大量用户反馈标题“看不见”；检查 DevTools 发现 computed style 里 color 是 rgba(0,0,0,0)，根源就是 background-clip: text 失败后没 fallback。
- 所有实验性属性必须包裹在
@supports块中，且只作用于明确声明的修饰符类，例如：@supports (background-clip: text) { .heading--gradient { background-clip: text; -webkit-background-clip: text; color: transparent; } } - 为不支持的环境提供语义等价的降级类，比如
.heading--gradient--fallback，由 JS 检测后动态添加（不用Modernizr，用CSS.supports('background-clip', 'text')） - 禁止把实验性属性塞进基础块样式里，例如
.heading { background-clip: text; }—— 这会让所有.heading都失效，而不是仅影响有明确意图的变体
如何用修饰符模拟 CSS 属性版本控制
BEM 本身不提供版本号，但你可以用修饰符命名表达兼容性边界，比如 .button--focus-ring-v2 或 .modal--backdrop-v1。这不是为了炫技，而是让团队一眼识别：“这个类名对应的实现，只承诺在 Chrome 90+ / Safari 15.4+ 下按预期工作”。
关键点在于：修饰符名里不出现浏览器名或数字版本，但必须和内部 CSS 的 @supports 条件严格对齐。
- 写法示例：
.button--focus-ring对应旧版 outline + box-shadow；.button--focus-ring-enhanced对应:focus-visible+outline-offset+inset阴影 - JS 控制时，不要硬编码判断
if (isSafari154)，而是检测特性：if (CSS.supports('outline-offset', '2px') && CSS.supports('selector(:focus-visible)')) - 构建阶段可配合 PostCSS 插件自动注入 safelist，防止 PurgeCSS 误删
button--focus-ring-enhanced—— 它只在 JS 检测通过后才加，构建时确实“未使用”
transform: scaleZ() 这类极少见属性怎么安全接入 BEM
这类属性连 Chrome Canary 都可能随时改行为，更别说稳定版。直接加修饰符风险极高，但完全不用又限制创新。折中方案是：把它变成「可插拔的视觉层」，而非组件固有状态。
结构上，用独立的 wrapper 元素承载实验性效果，例如：
<div class="card"> <div class="card__content">...</div> <div class="card__depth-layer card__depth-layer--z-scale"></div> </div>
-
card__depth-layer是真实 DOM 节点，不是伪元素，确保 JS 可控、DevTools 可见、动画可中断 -
--z-scale修饰符只负责启用该层的 transform，不参与卡片主逻辑；即使它失效，card__content仍完整可用 - 所有实验性 transform 必须带
will-change: transform，并在离开视口时用 IntersectionObserver 移除类名，避免持续占用 GPU 资源
多个实验性属性叠加时，修饰符要不要合并命名
不要。比如你同时用 scroll-driven-animations 和 view-transition-name，别写成 .hero--scroll-view-transition。这会让类名膨胀、语义模糊、组合爆炸。
正确做法是保持修饰符正交：.hero--scroll-triggered 控制动画启停，.hero--view-transition 控制切换过渡，两者可共存也可单独使用。
- CSS 中分开定义：
.hero--scroll-triggered启用@keyframes和animation-timeline；.hero--view-transition设置view-transition-name和transition-property - JS 中用
element.classList.toggle('hero--scroll-triggered', shouldAnimate)和element.classList.toggle('hero--view-transition', isNavigating)独立控制 - 真正容易被忽略的是：当两个实验性特性都启用时，它们的 timing function、easing、duration 很可能冲突。必须显式用 CSS 自定义属性统一管理：
--hero-animation-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
