block必须是独立可复用且具业务语义的功能单元，如search-form、login-form；element仅限block直属子节点，禁嵌套；modifier须与block或element共存，不可单独使用。
表单组件的Block命名必须带业务语义，不能叫form
直接用form当Block名是高频错误。它没业务含义，复用时极易冲突——比如页头搜索、登录弹窗、后台筛选都用form，CSS就全搅在一起。search-form、login-form、filter-panel才是合格命名：每个都对应一个可交付、可测试、能单独抽离的UI功能。
实操建议：
- Block名用kebab-case，全小写，不含数字或特殊字符（
user-registration-form✅，UserRegForm❌） - React里建议定义常量：
const BLOCK = 'search-form'，后续所有类名基于它生成，避免散落拼写不一致 - 别把HTML标签名当Block：
div、section、form本身不是组件，只是容器
form__input这类Element只能出现在Block的直接子节点上
BEM规定Element必须是Block的**直属子元素**。如果DOM结构是<div class="login-form"><div class="login-form__group"><input class="login-form__input"></div></div>，那login-form__input就非法——它实际父节点是login-form__group，不是login-form。
常见错误现象：
-
card__content__title：双下划线嵌套，BEM明确禁止Element再有子Element -
login-form__group__input：试图用嵌套表达层级，但__group本身已是Element，不能再挂__input -
login-form-input：缺双下划线，会被当作独立Block，失去归属语义
正确做法：要么扁平化DOM（把__group去掉），要么让__group升格为独立Block（如form-group），再组合使用。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
Modifier必须和对应Block或Element共存，不能单独出现
login-form__button--disabled合法，login-form__button--disabled单独写在class里就失效——因为BEM要求Modifier必须和基础类名同时存在，否则样式无法定位。
使用场景与陷阱：
- 状态类要精准绑定：按钮整体禁用，用
login-form__button login-form__button--disabled；仅文本变灰，才考虑login-form__button-text--disabled（前提是文本真有独立交互语义） - 避免用Modifier描述布局位置：
login-form--in-modal❌，这违反“Modifier只表达状态/变体”的原则，应由外层容器控制 - SCSS中只允许单层嵌套：
.login-form { &__button {} &__input {} }，禁止&__button &__icon（空格会生成后代选择器，破坏BEM扁平化目标）
多个表单共用同一套样式逻辑时，别硬塞进__里
如果search-form__input和login-form__input样式几乎一样，说明它们背后可能共享一套输入框逻辑——这时__input就不是纯粹的Element，而是具备复用价值的独立Block。
判断标准：
- 这个节点是否在多个上下文被复用？（比如
header__logo和footer__logo样式一致，但逻辑不同，仍应各自为Block） - 它是否有独立行为接口？（比如
input组件暴露onBlur、value等props） - 抽成独立Block后，是否仍能保持语义清晰？（
text-input✅，generic-input❌）
真正复杂的点在于：BEM不是语法题，是语义拆解题。类名写对只是表象，关键是Block边界是否真的对齐了业务职责——这点没法靠工具校验，得靠人盯住组件契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
