弹窗 block 名应为 .modal，遮罩层必须命名为 .modal__overlay，内容区统一用 .modal__content，所有状态变化通过 modifier 控制，如 .modal--open 和 .modal__overlay--visible。
弹窗整体该用什么 Block 名
直接叫 .modal，别加前缀或后缀。它是一个功能完整、可复用的独立组件：能单独渲染、能嵌套在任意父容器里、不依赖上下文就能理解用途。常见错误是写成 .popup（语义模糊）、.dialog-box（冗余）或 .ui-modal（带框架前缀，破坏 BEM 的命名自治性）。如果项目里有多个弹窗变体（比如确认框、表单弹窗、图片查看器），它们仍属于 .modal 这个 Block，靠 Modifier 区分：.modal--confirm、.modal--form，而不是新建 .confirm-modal 块。
遮罩层必须是 Element，不是独立 Block
.modal__overlay 是唯一合法命名。它不是新组件，而是弹窗的视觉附属部分——删掉 .modal，这个遮罩就失去意义；它不跨场景复用（比如抽屉的遮罩应叫 .drawer__overlay），所以不能提为 Block。容易踩的坑包括：
• 写成 .modal-overlay（缺双下划线，变成普通类，丢失层级归属）
• 写成 .overlay（脱离 Block，全局冲突风险高）
• 把渐变效果塞进名字里，比如 .modal__overlay-gradient（视觉效果是状态，不是结构，该用 Modifier）
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
内容区域命名要区分“容器”和“内容”
弹窗主体内容区统一用 .modal__content，它只负责包裹、定位和基础 padding，不承担具体业务逻辑样式。真实内容（比如标题、表单、按钮）由子元素承接：.modal__title、.modal__form、.modal__footer。关键点：
• 不要用 .modal__body（body 是 HTML 元素名，语义污染）
• 不要嵌套命名，比如 .modal__content__header（BEM 不允许三层，应拆成 .modal__header）
• 如果内容区需要滚动，用 Modifier：.modal__content--scrollable，而非新建块
Modifier 必须绑定到具体 Block 或 Element 上
所有状态变化都靠 Modifier 控制，但必须严格挂载：
• 正确：.modal--open（控制弹窗整体显隐）
• 正确：.modal__overlay--visible（控制遮罩显隐）
• 错误：.modal-visible（缺双连字符，非标准 Modifier）
• 错误：.overlay--visible（脱离 .modal 上下文，无法复用过渡逻辑）
• 错误：.modal__overlay--fade-in 单独使用（必须和 .modal__overlay 同时存在，否则基础样式缺失）
过渡动画必须写在基础类里，Modifier 只管激活态值，这点最容易被忽略——写反了，关闭时就直接闪退。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
