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 控制状态就会失控。


















