过渡属性必须写在基础类中，不能只写在修饰符里；浏览器只对已声明transition的属性做插值动画，修饰符仅负责切换终态值，如.opacity、visibility、transform等需在基础类中显式声明并配对应transition。
过渡属性必须写在基础类，不能只塞在修饰符里
很多人以为加个 --visible 或 --open 就能触发动画，结果关掉时“啪”一下消失——因为 transition 没写在基础类上。浏览器只对值变化的属性做插值动画，而 transition 本身不可继承、不可动画，必须提前声明。
正确做法是：把可动画属性（opacity、visibility、transform、width 等）和 transition 都放在基础类中，修饰符只负责切换终态值：
.modal__overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s step-end;
}
.modal__overlay--visible {
opacity: 1;
visibility: visible;
}
-
visibility必须配step-end，否则隐藏时会闪一下 - 别用
display: none—— 它不可过渡，且会破坏重排/重绘节奏 - 如果同时改
opacity和transform，两个属性都要列在transition声明里，不能只写一个
修饰符名要表达状态，不是动作
--fade-in 听起来像动词，但实际它描述的是“当前处于已淡入的状态”，不是“正在淡入”。BEM 修饰符语义必须是静态的、可预测的，否则 JS 切换逻辑容易错位。
常见错误命名：--show、--open-now、--animating —— 这些都暗示过程或瞬时行为，而 CSS 类名是离散快照，无法表达“进行中”。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 推荐：
--visible、--active、--expanded、--loaded - 避免：
--showing、--opening、--is-open（is-前缀专用于 JS 控制的运行时状态类，如is-sidebar-open） - React/Vue 中用
clsx统一管理：clsx('modal__overlay', { 'modal__overlay--visible': isOpen })
多个过渡效果共存时，修饰符要正交设计
比如一个弹窗既要淡入又要从底部滑入，不能硬凑 --fade-in-slide-up。这种组合修饰符违反单一职责，复用性差，也难测试。
应该拆成两个独立修饰符，靠 CSS 层叠叠加生效：
.modal__overlay--fade-in { opacity: 1; visibility: visible; }
.modal__overlay--slide-up { transform: translateY(0); }
- JS 可自由组合：
modal__overlay--fade-in modal__overlay--slide-up - 关闭时只需移除全部修饰符，无需判断哪几个在生效
- 如果某次只想要滑入不要淡入，删掉
--fade-in即可，不改样式也不动逻辑 - 注意顺序：多个
transform值会覆盖，所以--slide-up要确保声明在--fade-in之后，或统一用一个修饰符控制完整transform
过渡时机受父级状态类影响时，选择器权重必须可控
BEM 禁止用后代选择器（如 .is-modal-open .modal__overlay），但状态类常挂在父容器上。这时得靠明确的层级约定，而不是靠 CSS 权重“抢赢”。
推荐结构：状态类加在 或布局容器上，基础类自身带 transition，修饰符只管终态：
body.is-modal-open .modal__overlay {
opacity: 1;
visibility: visible;
}
- 这个选择器虽含后代关系，但它是“状态容器 → 组件”的稳定映射，不依赖 DOM 深度
- 比
.modal--open .modal__overlay更安全：后者要求modal--open必须加在 block 根元素上，而实际中根元素可能被 Portal 移走 - 所有动画相关样式必须集中在一处（基础类 + 修饰符 + 状态容器），避免分散到
.modal__header、.modal__content各自定义transition
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
