真正有效的状态类必须带双连字符且前缀为块名，如.modal--open；修饰符须挂载在执行动画的元素上；transition写在基础类中，animation写在修饰符规则里；禁用多重修饰符，一个块同一时间只允许一个主导状态修饰符。
为什么不能用 .is-open 或 .animate-in 作为动画状态类
这类命名会被工具链（Stylelint、PostCSS 插件、VS Code 类名跳转）忽略，当作普通类或新 Block 处理。.is-open 不绑定任何组件，加在 <div class="modal"> 上时，CSS 选择器 <code>.is-open .modal__overlay 根本不生效；.animate-in 更是脱离上下文，无法复用、不可预测、调试时找不到源头。
真正有效的状态类必须带双连字符 -- 且前缀为块名：.modal--open 表示 “modal 这个块当前处于打开状态”，语义唯一、作用域明确、工具可识别。
-
.modal--open✅ 工具链识别为 modal 块的状态类 -
.modal-fade-in❌ 被解析为独立 Block，脱离 modal 上下文 -
.modalFadeIn❌ CSS 选择器不支持驼峰，浏览器直接忽略
修饰符必须挂载在能承载动画的元素上
动画效果依赖具体属性（如 transform、opacity、max-height）和其所在元素的渲染上下文。把 .carousel--sliding 加在父容器 .carousel 上，但动画实际发生在子元素 .carousel__track 的 transform 上，结果就是动画不触发或错位。
正确做法是让修饰符落在真正执行动画的节点上：
- 若
animation: carousel-slide-in写在.carousel__track上，则.carousel--sliding必须加在它身上 - 若
transition: height控制.accordion__content展开，则.accordion--open应作用于该内容区，或确保后代选择器能精准命中 - 避免跨层级“猜”作用点：JS 添加类前，先确认目标元素是否拥有对应动画声明的 CSS 规则
transition 和 animation 必须显式写在修饰符规则里
只加 .button--loading-spin 类，却不写 .button--loading-spin .button__icon { animation: spin 1s infinite; }，等于没写动画。BEM 修饰符本身不携带行为，它只是开关——开关闭合后，靠 CSS 规则来执行。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
关键区别：
-
transition声明应写在基础块类中（如.accordion { transition: height 0.25s ease; }），修饰符只改值（.accordion--open { height: auto; }） -
animation必须写在修饰符规则里（.modal--fading-out .modal__overlay { animation: modal-fade-out 0.3s ease; }），否则不会启动 - 禁用
* { transition: all .2s }：它会让margin、color等非预期属性也过渡，且无法配合will-change优化
多个状态共存时，不要叠加修饰符
.modal--open--loading 是非法写法。BEM 不支持多重互斥修饰符，语义混乱、无法维护、工具链报错。一个块同一时间只能有一个主导状态修饰符，代表当前最精确可描述的 UI 模式。
实操方案：
- 主状态用单一修饰符：
.modal--opening（入场动画中）、.modal--booting（首次初始化） - 次要信息交由
data-属性承载：data-modal-pause-reason="timeout"，供 JS 判断，CSS 不参与 - 视觉叠加拆到元素级：
.modal__header--loading+.modal__footer--disabled，各自控制不同区域
最容易被忽略的是：状态修饰符不是布尔集合，而是对「当前有效行为模式」的声明。你永远不该靠拼凑多个 -- 类来表达一个画面——那说明状态定义还不够精确。
