BEM规范下筛选器需严格遵循块-元素-修饰符边界：filter为语义化独立块名，tag与clear为同级元素，禁止三级嵌套；状态修饰符须单一职责，交互控件需无障碍支持。
复杂过滤筛选器的样式混乱，根本原因不是结构多，而是类名没守住“谁属于谁”的边界。BEM 能管住它，但必须严格按规则切分作用域，否则 filter__tag__close 这种写法一出现，就等于放弃治疗。
filter 块怎么定义才不和 search、sidebar 冲突
块名必须语义化且独立，不能带位置或内容暗示。比如 top-filter-bar 或 product-filter-2024 是错的 —— 前者绑定布局，后者绑定年份，后期重构必踩坑。
-
filter是合理块名：它描述功能，可复用在商品页、日志页、后台管理页 - 如果项目里已有全局
filter（如工具函数），加业务前缀，比如product-filter，但不要用filter-product（顺序反了，BEM 要求 block 在前） - 禁止嵌套块：不要把
filter放进sidebar后就写成sidebar__filter，那它就不再是独立块，而是 sidebar 的一个元素 —— 此时应重命名为sidebar-filter，自成新块
标签（tag）和清除按钮（clear）该挂在哪一级
标签是筛选结果的可视化反馈，清除按钮是它的操作入口，二者逻辑强绑定，但**不能**让 clear 成为 tag 的子元素。BEM 不允许三级命名，filter__tag__clear 违反规范，也导致样式无法解耦。
- 正确结构：价格: ¥100
-
filter__tag-clear是顶层块filter的独立元素，和filter__tag并列，不是它的后代 - 这样写才能保证：删掉某个 tag 时，只移除
filter__tag和配套的filter__tag-clear，不影响其他 tag 的样式继承 - 如果清除按钮要支持键盘聚焦，必须设
tabindex="0"，且用filter__tag-clear--focused而非filter__tag--clear-focused（修饰符只作用于它直接归属的元素）
状态类怎么加才不会互相打架
筛选器常有「已激活」「不可清除」「加载中」等多种状态，modifier 一多就容易叠成 filter__tag--active--disabled--pending，这违反 BEM 单一职责原则，JS 控制和 CSS 维护都变脆弱。
- 每个 modifier 只表达一种可切换的状态：
filter__tag--active、filter__tag--disabled、filter__tag--loading - 禁用清除按钮时，不要给
filter__tag-clear加--disabled，而应控制其父filter__tag的状态，再用 CSS 选择器.filter__tag--disabled .filter__tag-clear隐藏或置灰 - 避免跨元素修饰：不要写
filter__tag-clear--for-price-tag，这种“关系型”修饰符会让样式失去通用性；真需要差异化，用 data 属性配合 JS 判断
BEM 在筛选器上最易被忽略的点，是把「清除按钮」当成装饰图标来处理 —— 它实际是交互控件，必须有明确的焦点管理、语义 role（role="button"）、无障碍 label（aria-label="清除价格筛选"）。命名只是起点，真正的隔离靠的是结构诚实和状态可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
