筛选栏必须是独立Block（如filter-bar或filter-panel），与search-form同级；禁用search-form__filter等嵌套命名，避免职责混淆、复用失效和样式污染。
筛选栏不能作为 search-form 的子模块，它和搜索表单是同级、独立的 Block；强行套用 search-form__filter 会破坏职责边界、导致复用失效、样式污染。
筛选栏必须是独立 Block：filter-bar 或 filter-panel
它不隶属于搜索流程，而是承载「条件组合 + 状态同步 + 多端联动」的完整逻辑单元。常见错误是写成 search-form__filter 或 search-filter——前者把筛选降级为搜索的装饰性附属，后者语义模糊（到底是搜索用的过滤器，还是商品列表页的过滤器？）。正确命名如 filter-bar（强调横向布局与操作密度）或 filter-panel（强调可折叠、含标题与分组），确保在全局 CSS 中能被唯一识别。
-
filter-bar适合顶部紧凑型筛选（如电商搜索结果页的「价格、品牌、评分」横排） -
filter-panel更适合侧边栏或弹出式结构（如后台数据看板的多维条件区） - 禁用
search-filter、result-filter这类含上下文词的命名——筛选逻辑可能复用于商品列表、订单管理、日志查询等场景，绑定位置或来源会锁死复用路径
内部元素必须直属，禁止嵌套 Element 命名
filter-bar__checkbox 合法，filter-bar__group__checkbox 不合法。BEM 不允许三层结构，所有 Element 都必须直接挂载在 Block 根节点下。常见错误是为“分组容器”单独设 filter-bar__group，再在里面放 filter-bar__group__item——这等于人为制造嵌套依赖，一旦改分组逻辑就得同步调整所有子类名。
- 分组本身不是独立功能单元，只是视觉/语义聚类，用
<fieldset>或带aria-labelledby的<div role="group">即可，无需对应 Element 类名 - 每个可交互控件（
<input type="checkbox">、<select>、<button>）都应有独立 Element：如filter-bar__checkbox、filter-bar__range、filter-bar__submit - 若需区分控件用途，用 Modifier：
filter-bar__checkbox--price、filter-bar__checkbox--brand，而非新建filter-bar__price-checkbox
Modifier 必须描述意图，不能绑定 UI 表现或业务值
状态切换必须通过原子化 Modifier 控制，比如 filter-bar--collapsed、filter-bar__submit--loading。错误写法如 filter-bar--mobile（设备不是意图，是响应式断点）、filter-bar__checkbox--500-1000（价格区间是动态值，不可预测）、filter-bar__submit--blue（颜色是皮肤层，应由 CSS 自定义属性控制）。
立即学习“前端免费学习笔记（深入）”；
- Modifier 只回答「它当前是什么状态」，不回答「它长什么样」或「它代表什么数据」
- 多状态共存时，Modifier 可叠加：
filter-bar__checkbox--price filter-bar__checkbox--checked，但不能合并为filter-bar__checkbox--price-checked（违反原子性） - JS 操作必须用
classList.toggle()直接增删完整类名，避免字符串拼接漏双短横，例如：el.classList.toggle('filter-bar__checkbox--checked')✅，而不是el.classList.toggle('filter-bar__checkbox' + '--checked')❌
与搜索表单的状态联动，靠 JS 控制类名，不靠 CSS 选择器嵌套
筛选栏选中后，搜索结果要刷新；搜索关键词变更后，筛选状态可能需重置。这类跨 Block 协作不能靠 .search-form--has-query .filter-bar 这种后代选择器实现——它把样式逻辑耦合进 DOM 层级，一旦结构微调就失效，且无法在 SSR 或微前端中可靠运行。
- 状态同步交由 JS 统一管理：监听
search-form的submit或input事件，触发filter-bar的reset()方法，该方法内部调用classList.remove('filter-bar__checkbox--checked')等 - CSS 文件严格分离：
filter-bar.css只管自身结构与状态样式，不 import、不依赖search-form.css - 如果筛选栏需响应搜索关键词高亮匹配项（如「苹果」自动勾选「品牌：Apple」），应在 JS 中查 DOM 并添加
filter-bar__checkbox--matched，而不是用[data-search-term="apple"] .filter-bar__checkbox这类脆弱选择器
最易被忽略的一点：筛选栏的「重置」按钮不是 filter-bar__button--reset，而是独立 Block reset-button——因为它可能复用于表单、导出配置、图表时间范围等任意需要清空状态的场景。BEM 的复用性，从来不是靠猜，而是靠 Block 边界的物理隔离。
