search-form 是唯一合法的 block 名，必须包裹 form 标签并设 name 属性；其下仅允许 search-form__input 和 search-form__button 两个 element，且均需遵循 type 规范与 modifier 原子性原则。
search-form 是唯一合法的 Block 名
别用 search、search-box 或 searchInput 作为顶层类名。这些名字语义残缺，无法承载“表单提交”“回车触发”“原生清空按钮支持”等行为边界。真正能独立复用、带交互能力的最小单元是整个搜索流程——它必须是 search-form。
原因很直接：只有 search-form 能明确划出样式与逻辑的归属范围。一旦后续出现 search-suggestion 或 search-result，它们天然就是同级 Block，不会因命名模糊被迫嵌套或冲突。
-
search-form必须包裹<form></form>标签，且含name属性（如name="q"），否则提交参数丢失、Enter 键无响应 - 不要加
role="search"的冗余 wrapper div——<form class="search-form"></form>本身已具备完整可访问性语义 - 移动端软键盘右下角文字（“搜索” vs “前往”）由
type="search"决定，不是靠类名模拟
search-form__input 和 search-form__button 是唯二合法的 Element
search-form__input 对应输入框，search-form__button 对应提交按钮。二者都必须是 search-form 的直属子元素，不能出现 search-form__icon 或 search-form__lens 这类虚构 Element。
图标不是独立 Element，它是按钮的视觉部分；搜索放大镜图形应通过伪元素或 SVG 内联进 search-form__button，而不是拆成新类。BEM 不鼓励为纯装饰性内容创建 Element。
-
search-form__input必须设type="search"，才能激活 Safari 自动清空按钮、Chrome 拼写检查禁用等原生行为 -
search-form__button推荐用type="submit"，而非type="button"，确保回车可提交 - 若需不同按钮变体（如“高级搜索”），用 Modifier：
search-form__button--advanced，而不是新建search-form__advanced-button
聚焦态、清空态、有值态必须用 Modifier，且作用对象要精准
状态不是新结构，而是已有 Block 或 Element 的临时变体。Modifier 必须严格绑定到它所修饰的实体上，不能跨层、不能拼接、不能省略双短横。
常见错误是写 search-form__input-focused（缺 --，被解析为 Element）或 search-form--has-value .search-form__button--hidden（把按钮隐藏逻辑挂到表单上，导致清空按钮在其他场景也意外隐藏）。
- 聚焦态：用
search-form__input--focused，JS 通过classList.toggle()直接操作完整类名 - 清空按钮应为独立 Block：
clear-button，不是search-form__clear；否则它无法复用于过滤面板、表单重置等场景 - 清空按钮的状态该由自身修饰符控制：
clear-button--hidden或clear-button--active，而不是依附于search-form
现有项目补 BEM 容易踩的三个坑
别一上来就重命名全部 class，容易翻车。重点盯住高频、跨业务复用的模块（如表单控件、卡片、弹窗）。
常见错误现象：
- 旧写法
.search .input→ 新写法search-form__input，但漏掉search-form根类，导致样式失效 - 把
clear-button写成search-form__clear，后续在筛选器中复用时，样式和 JS 行为全部错位 - Modifier 类名拼写不一致：
search-form__input--focus（少 d）或search-form__button--submit（语义错误，submit 是 type，不是状态）
最常被忽略的不是命名规则本身，而是 Modifier 的原子性——每个修饰符只表达一种意图，且必须可单独增删。一旦写成 search-form__input--focused-clear 这种耦合形式，JS 控制状态就会失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
