grid容器必须是带业务语义的独立block，如login-form；禁止用form-grid等无语义类名，须绑定职责、严格匹配grid-area与bem类名、避免嵌套超两层、内层复杂结构升格为独立block，样式仅属单一block。
表单Grid容器必须是带业务语义的独立Block
直接用 form-grid 或 container 作类名，等于放弃可维护性。搜索时找不到具体是登录表单还是地址编辑表单；样式容易被其他同名类覆盖；换 Flex 布局时所有类名都得重命名。
真正该做的是绑定业务职责：login-form、address-edit-form、product-filter-form——这些名字能被 grep 出来，也能让新成员一眼看懂上下文。
-
login-form的 CSS 规则里只写display: grid、grid-template-areas、gap和轨道定义（如grid-template-columns），不掺杂padding、background、字体颜色等业务样式 - 禁止把整个页面当顶层 Block 写
page__form__email这类长名，删掉父容器后模块无法独立渲染 → 它就不该是 Element，而该是 Block - 第三方组件（如
el-select）不强行套 BEM，而是用 wrapper Block 包裹，例如form-field__select-wrapper
每个 grid-area 必须与子元素 BEM 类名严格一致
常见错误是 CSS 里写 grid-area: email-field，HTML 却写 <div class="email-field">。孤立类名没绑定块，BEM 的作用域隔离就失效了：调试时搜 <code>email-field 会拉出十几个模块的干扰项；改样式时不敢动，怕影响别处。
正确做法是 HTML 中对应区域的直接子元素必须带完整路径：<div class="login-form__email-field">；CSS 中只通过 <code>.login-form__email-field 控制该区域样式，禁止用 .login-form .email-field 这类后代选择器。
- 禁止三层嵌套，比如
login-form__email-field__input—— 输入框应作为元素存在：login-form__email-field-input - 不要用
grid-column: 1 / -1强行撑满区域，这会破坏__email-field的视觉边界，后续加border或box-shadow时容易错位变形 - 原生标签（如
<label></label>、<input>）只保语义，样式全由 BEM 类接管，不依赖标签选择器
内层复杂结构必须升格为独立 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”原则 - 如果某区域逻辑上属于子模块（如实时预览区），优先拆成独立
preview-paneBlock，而不是塞进login-form__preview
响应式和状态变更不靠新增类名，只改 grid-template-areas 或 Modifier
BEM 类名描述的是语义角色，不是视觉位置。移动端把验证码区域挪到邮箱字段下方，不意味着要改成 login-form__email-field__code-below；真正该动的是 CSS 中的 grid-template-areas，或用 Modifier 如 login-form--mobile 控制整体布局切换。
- Modifier 分两类：
--sending（静态变体）、is-loading（运行时状态），禁用视觉描述如--blue、--tall - 多个 Modifier 并列使用：
phone-verify-group phone-verify-group--loading is-disabled，而非phone-verify-group--loading--disabled - SCSS 中只允许单层嵌套：
.phone-verify-group { &__input {} &--loading {} }；禁用&__input &__btn（中间带空格）这种生成后代选择器的写法
