search-form 是唯一合法的 Block 名，因其语义完整、功能闭环；input 和 button 必须作为直属 Element 写为 search-form__input 和 search-form__button；Modifier 仅修饰自身节点，如 search-form__input--focused，禁用跨层或样式值命名。
search-form 是唯一合法的 Block 名，别用 search 或 search-box
搜索框不是孤立的输入控件，而是一个带提交逻辑、可能含清空按钮和状态反馈的完整功能单元。叫 search 会导致语义塌缩：后续出现 search-result 或 search-suggestion 时，没人能判断哪个才是真正的“块”。search-form 明确表达了它是一组可提交的表单控件，所有子元素都天然归属其作用域。
常见错误：search-box（box 是视觉描述，非功能主干）、header-search（含位置词，破坏复用性）、user-search（含内容词，绑定业务上下文）。BEM 块名必须回答“What is it?”——它是搜索表单，不是“放在 header 里的搜索”。
input 和 button 必须作为直属 Element，用 __ 分隔
search-form__input 和 search-form__button 是仅有的合法写法。它们必须直接挂载在 search-form 元素上，不能嵌套在中间容器里（比如 div.search-form__inner），否则就破坏了 “Element 是 Block 的直属组成部分” 这一前提。
不推荐加功能后缀：search-form__search-input 多余且冗长；search-form__input-field 中的 field 是冗余后缀，input 本身已表达控件类型。Element 名只说“它是什么”，不说“它用来干啥”。
多个按钮需区分用途时，用 Modifier：search-form__button--submit、search-form__button--clear，而不是新建 search-form__clear-button —— 后者会制造伪 Block，混淆层级。
Modifier 只能修饰 Block 或直属 Element，禁止跨层或描述样式值
聚焦态写成 search-form__input--focused ✅，写成 search-form__input-focused ❌（缺双短横，被解析为 element）；禁用 search-form__input--border-blue 这类绑定具体样式的写法——Modifier 应描述意图（如 --focused、--disabled、--loading），而非结果。
清空按钮的状态应由自身控制：clear-button--hidden，而不是挂在父级下写 search-form__clear--hidden。一旦你发现 Modifier 类名里出现了三层结构（比如 search-form__button--clear--hidden），说明你已经误把 Modifier 当成了嵌套 Element，这是 BEM 最常踩的坑。
清空按钮要不要独立成 Block？看复用场景
如果清空按钮只出现在搜索框里，且样式/行为完全耦合（比如只响应 search-form__input 的输入事件），那它就是 search-form__button--clear，无需抽离。
但若它还用于过滤面板、表单重置、文本域清空等场景，就必须定义为独立 Block：clear-button，并提供 clear-button--active、clear-button--hidden 等 Modifier。此时它与 search-form 是平行关系，通过 JS 绑定事件，而非 CSS 结构依赖。
关键判断标准：这个按钮拿出来，能不能不改一行样式、不改一行 JS 就直接用在另一个组件里？能，就该是 Block；不能，就老老实实当个 Element。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
