.header .nav li a会因dom结构变动失效，因其依赖隐式层级而非显式类名；bem要求用header__nav、header__nav-item等单类名绑定归属，禁用空格选择器，确保样式可预测、可复用、可安全删除。
为什么.header .nav li a这种写法会让样式随HTML结构一起崩
因为它的作用域完全靠DOM层级隐式绑定，不是靠类名显式声明。只要改个父容器类名、加个中间包裹层、甚至只是把li换成div，整个选择器就失效或误命中。多人协作时更危险：A改了.header的padding，B写的.header .nav突然多出12px margin——没人知道谁在影响谁。
真正解耦的做法是让每个样式只依赖一个类名：header__nav、header__nav-item、header__nav-item--active。这些类名自带归属和语义，挪到任何HTML位置都有效，删掉对应HTML块，CSS也能安全删除，不污染全局。
- 禁止用空格分隔的选择器，比如
.header .nav或.card .card__title - 子元素必须是block的直接子节点，
card__content__title是违规的，应拆成card__content和content__title两个独立block - 第三方组件（如
ant-card）不要强行套BEM，用wrapper class隔离：<div class="product-card"><div class="ant-card">...</div></div>
怎么把旧项目里散落的.input、.error、.label改成BEM结构
不是简单全局替换类名，而是按组件边界重新归属。比如原来全站共用的.input，实际属于不同上下文：登录表单里的输入框、商品筛选里的搜索框、后台编辑页的字段——它们视觉相似，但语义和行为不同。
正确做法是锁定高频冲突模块（如form-item），把相关类全部收归其下：
- 原
<input class="input">→<input class="form-item__input"> - 原
<span class="error"></span>→<span class="form-item__error"></span> - 原
<label class="label"></label>→<label class="form-item__label"></label> - 状态类
.input-error→form-item__input--error（修饰符挂载在element上，不是新class）
关键点：CSS里删掉所有孤立的.input规则，只保留.form-item__input及其修饰符；HTML中每个块级容器必须带block类，比如<div class="form-item">。
<h3>BEM修饰符（--）为什么不能写成button--primary-disabled</h3>
<p>因为<code>--primary-disabled把两个正交状态耦合在一起，无法单独开关。用户点击按钮时需要动态加/删禁用态，但button--primary-disabled一旦移除，主题色也丢了——这不是预期行为。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确方式是用多个独立修饰符组合：class="button button--primary button--disabled"。这样JS控制只需操作button--disabled，不影响主题逻辑。
-
--primary表达“主题变体”，--disabled表达“交互状态”，二者互不干扰 - 避免用伪类覆盖修饰符，比如
.button--disabled:hover——鼠标悬停时禁用态失效，违背交互一致性 - 修饰符不能承担布局职责，
button--full-width是反模式，宽度应由容器控制或抽成独立element
遇到嵌套深的组件（如card > list > item > avatar）怎么避免类名爆炸
硬套三层BEM（card__list__item__avatar）已经违背BEM初衷。BEM默认假设每个子组件都是自治的，不是父组件的附属物。
真实做法是承认组件边界：list本身就是一个block，它内部用list__item、list__item__avatar，而不是card__list__item__avatar。card只负责布局容器，不侵入list内部结构。
- card里嵌list时，HTML写
<div class="card__content"><div class="list"></div></div>，不是<div class="card__list"> <li>若需微调（如card内list间距变小），用modifier：<code><div class="list list--compact-in-card">，而非加深选择器 <li>avatar如果跨模块复用（card、user-profile、notification），它就该是独立block：<code>avatar，不是任何__element
最易被忽略的是：BEM的解耦能力不来自命名长度，而来自对“什么算一个UI单元”的共识。哪怕用Tailwind或CSS-in-JS，这个认知边界依然决定样式是否可维护。
