表单容器必须使用带业务语义的类名（如login-form），禁止通用名（如form-grid）；grid-area值须与BEM子元素类名严格一致（如login-form__email-field）；复杂内嵌结构应升格为独立Block（如phone-verify-group）；响应式与状态仅通过grid-template-areas或Modifier（如--sending）控制。
表单容器必须用业务块名，不能叫form-grid或layout
直接写 class="form-grid" 看似合理，但实际埋了三个雷：搜索时找不到具体是哪个表单（登录？注册？地址编辑？），样式容易被其他同名类覆盖，换 Flex 布局时所有类名都得重命名。真正该做的是绑定业务语义：login-form、address-edit-form、product-filter-form——这些名字能被 grep 出来，也能让新成员一眼看懂上下文。
注意：.login-form 的 CSS 规则里只写 display: grid、grid-template-areas、gap 和轨道定义（如 grid-template-columns），不掺杂 padding、background、字体颜色等业务样式。否则就退化成“带前缀的全局工具类”。
每个 grid-area 必须与子元素 BEM 类名严格一致
常见错误是 CSS 里写 grid-area: email-field，HTML 却写 <div class="email-field">。孤立类名没绑定块，BEM 的作用域隔离就失效了。调试时搜 email-field 会拉出十几个模块的干扰项；改样式时不敢动，怕影响别处。
正确做法是：
- HTML 中对应区域的直接子元素必须带完整路径：
<div class="login-form__email-field"> - CSS 中只通过
.login-form__email-field控制该区域样式，禁止用.login-form .email-field这类后代选择器 - 禁止三层嵌套，比如
login-form__email-field__input—— 输入框应作为元素存在：login-form__email-field-input
内层复杂结构（如动态字段组）必须升格为独立 Block
当 login-form__fields 里要塞一个支持增删、校验状态、异步加载提示的“手机号+验证码”组合区块时，它已不是“字段区的一个子项”，而是有自身状态、可复用、需单独测试的模块。
立即学习“前端免费学习笔记（深入）”；
错误写法：login-form__fields__phone-verify-group（三层嵌套，BEM 明确禁止）
正确做法：
- 定义独立 Block：
phone-verify-group - 内部用
phone-verify-group__input、phone-verify-group__code-btn、phone-verify-group--loading等命名 - HTML 结构为：
<div class="login-form__fields"><div class="phone-verify-group"></div></div> - 绝对不在
login-form.css里写.login-form__fields .phone-verify-group—— 这引入隐式依赖，违背“样式只属于一个 Block”原则
响应式和状态变更只动 grid-template-areas 或 Modifier，不动类名
BEM 类名描述的是语义角色，不是视觉位置或设备类型。移动端把验证码按钮从右侧移到下方，不意味着要改成 login-form__email-field-mobile；验证码发送中也不该加 --active 这种模糊状态，而要用明确语义的 --sending 或 --sent。
实操要点：
- 媒体查询中只改
grid-template-areas字符串，比如从"email code"改成"email" "code" - 状态类统一用 Modifier：
phone-verify-group--sending、login-form__submit-btn--disabled - 禁止用
login-form__email-field--mobile这类含设备词的类名 —— 设备不是语义，状态和职责才是
最易被忽略的一点：grid-area 值一旦和类名不一致，整个 BEM 的可追溯性就断了。搜 login-form__ 拉不出对应区域的 CSS，JS 查询也拿不到上下文，后续加 border 或 box-shadow 时边界错位还查不出原因。
