表单块名必须是功能名词，如.login-form、.search-form，不能叫.form或.wrapper；元素仅限直系子级，禁嵌套命名；修饰符须用布尔状态，禁用视觉值。
表单块名必须是功能名词，不是容器或结构描述
表单的 Block 名不能叫 .form 或 .wrapper——这类名称没语义，一换布局就失效。它得表达“这是什么表单”，比如 .login-form、.search-form、.contact-form。这些名字在首页、弹窗、侧边栏里都能复用，且不依赖父级 DOM 结构。
常见错误：.section-form、.form-container、.modal-form。它们绑定了位置或容器类型，导致样式无法跨上下文迁移。
- ✅ 正确：一个登录表单在弹窗和独立页面中使用同一套
.login-form类，JS 逻辑和 CSS 都无需修改 - ❌ 错误：写成
.modal__login-form，等于把 modal 布局逻辑混进表单本身，违背 BEM “块独立”原则 - ⚠️ 注意：如果多个表单共用大量样式（如输入框、按钮），应提取公共原子块（
.form-field、.form-button），而不是让每个表单块重复实现
表单元素只限直系子级，禁止嵌套命名
表单内部的字段、按钮、提示文案等，都是 .login-form 的直接组成部分，命名用 __ 连接，如 .login-form__input、.login-form__submit、.login-form__error。关键判断标准是：删掉 .login-form 容器，这个类是否还有意义？没有，就是元素；有，它该是独立块。
典型反例：.login-form__input__icon 或 .login-form__field__label。BEM 不允许三层命名，浏览器也不需要那么长的选择器。
- ✅ 正确：图标若在多个表单中复用（如邮箱图标、密码可见图标），应升为独立块
.input-icon，再通过修饰符区分类型：.input-icon--email - ❌ 错误：把验证提示写成
.login-form__input__hint，实际应是.login-form__hint（直属于表单）或单独块.validation-hint - ⚠️ 注意：SCSS 中避免写
&__input { &__icon { ... } }，编译后会生成后代选择器，破坏封装性
状态类优先用布尔型修饰符，而非视觉或 JS 状态硬编码
表单交互频繁，容易滥用修饰符。正确做法是用业务语义而非实现细节命名：.login-form--submitted 比 .login-form--loading 更合理，因为后者暴露了加载状态，而前者描述的是“已提交”这一确定业务阶段。
元素级修饰符也同理：.login-form__submit--disabled 合法，但 .login-form__submit--ajax-loading 就越界了——加载态应由 JS 控制类切换，CSS 只负责呈现 --disabled 下的样式。
- ✅ 正确：多个状态可叠加，
.login-form__input--invalid--focused是可维护的组合 - ❌ 错误：用
--red、--small、--v2这类模糊或临时词，后续改主题或重构时无法批量替换 - ⚠️ 注意：修饰符不改变 DOM 结构。如果某次提交后要插入新节点（如成功 toast），这不是 BEM 范畴，应交由组件逻辑处理
避免用后代选择器模拟 BEM 层级关系
BEM 的核心价值之一是扁平化、无依赖。但很多人写 CSS 时仍习惯用 .login-form .input 或 .login-form > .login-form__input，这既多余又危险——前者失去 BEM 封装性，后者一旦 HTML 结构微调（比如加了 wrapper div），样式就失效。
真正合规的写法，是只靠类名本身匹配：.login-form__input 必须在 HTML 中显式写出，且不依赖父类是否存在（哪怕父块类被 JS 移除，该元素样式也不该崩）。
- ✅ 正确：所有样式规则都基于单一类名，如
.login-form__input { width: 100%; } - ❌ 错误：用
.login-form .form-field__input混合命名体系，既违反 BEM，又让调试变得困难 - ⚠️ 注意：浏览器 CSS 匹配是从右往左的，
.login-form__input比.login-form .input性能更优，尤其在复杂 DOM 中
.tooltip、.badge、.icon，一旦它们在非表单上下文中也被高频使用，就必须拆成独立块——否则你写的就不是 BEM，而是带前缀的混乱命名。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
