search-form 是唯一合法的 block 名，必须包裹 form 标签并设 name 属性；search-form__input 和 search-form__button 是唯二合法 element，需用 modifier 精准声明状态；clear-button 应为独立 block。

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 必须严格绑定到它所修饰的实体上，不能跨层、不能拼接、不能省略双短横。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

常见错误是写 search-form__input-focused（缺 --，被解析为 Element）或 search-form--has-value .search-form__button--hidden（把按钮隐藏逻辑挂到表单上，导致清空按钮在其他场景也意外隐藏）。

• 聚焦态：用 search-form__input--focused，JS 通过 classList.toggle('search-form__input--focused') 控制
• 有值态：用 search-form--has-value，监听 input 事件判断 input.value.length 后切换该 Modifier
• 清空按钮显隐：浏览器原生控制，无需 JS 显式操作；若需自定义（如同步清空 URL 参数），监听 input 事件 + input.value === '' 判断即可

clear-button 必须是独立 Block，不能塞进 search-form 下

清空按钮（×）不是搜索框的子部件，它是可复用的交互控件。把它硬写成 search-form__clear 会破坏复用性：当过滤面板、表单重置、地址输入框也需要清空时，你就得重复实现样式和逻辑。

正确做法是单独定义 clear-button Block，并在需要的地方复用：<button class="clear-button"></button>。它的状态由自身 Modifier 控制，比如 clear-button--active 或 clear-button--hidden。

• 不要用 search-form__input::-webkit-search-cancel-button 去覆盖原生清空按钮——它只在 Chrome/Edge 生效，Firefox 需要 ::-moz-search-cancel-button，维护成本高
• 若设计要求完全自定义清空按钮（如带 Tooltip 或动画），保留原生按钮不可见，再叠加一个 clear-button 绝对定位覆盖，用 pointer-events: none 让点击穿透到原生按钮
• 调试时，在 DevTools 里看到 clear-button--active 就知道状态归属清晰，不会误以为是 search-form 的副作用

最易被忽略的一点：BEM 的 Modifier 不是“开关”，而是“声明”。search-form--has-value 不代表“当前有值”，而代表“这个表单正处于有值的状态”。状态变更必须由 JS 精确触发，不能依赖 CSS 选择器推导（如 .search-form__input:not(:placeholder-shown)），否则 SSR 或初始渲染时容易错位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！