BEM的块名必须对应真实DOM结构，如header、product-card等语义化容器节点，确保可追溯、防样式穿透；修饰符需依附基础块/元素，子元素命名重职责轻视觉，层级限1层，便于调试与重构。
为什么BEM的块名必须对应真实DOM结构
BEM的block不是随便起的，它得是页面里真实存在的、有明确语义的容器节点。比如header、product-card、search-form——这些名字能直接在HTML里找到对应元素。如果硬套一个不存在的“逻辑块”（比如叫main-section但DOM里只有div），后续重构时根本没法反向追溯样式来源。
常见错误现象：.user-info__avatar写得好好的，结果发现HTML里user-info只是个div class="container"，没加class；或者多个不相关的区域共用同一个块名，导致样式意外穿透。
- 检查方式：打开浏览器开发者工具，选中元素，看它的class是否以
xxx开头（即块名），且该class确实存在于该元素上 - 重构友好做法：块名尽量和组件文件名、路由路径或数据模型字段对齐，比如React组件叫
OrderSummary.jsx，对应CSS块就用order-summary - 避免用抽象词如
section、wrapper、item作块名，除非它们在项目约定中已有明确定义
修饰符（Modifier）不能脱离元素独立存在
button--disabled这种写法看起来简洁，但如果HTML里只写class="button--disabled"而漏了button，样式就失效——因为BEM修饰符是强依赖关系，它只是对某个element的补充状态，不是新组件。
使用场景：按钮禁用、卡片折叠、表单校验失败等临时状态变更。这类状态往往需要JS控制class增删，所以必须保证基础类始终存在。
- 正确写法：
class="button button--disabled"，而不是class="button--disabled" - 参数差异：
--large和--primary可以共存（button button--large button--primary），但不要嵌套修饰符（禁止button--primary--disabled） - 容易踩的坑：用Sass写
{&--disabled { opacity: 0.5; }时，若父选择器没定义button本身，编译后规则无效
子元素（Element）命名要反映职责，而非视觉位置
menu__item比menu__link更安全，因为前者描述的是“菜单里的可操作单元”，后者一旦换成按钮或带图标的区块就名不副实。card__content也比card__body更通用，毕竟不是所有卡片都模仿Bootstrap的card-body结构。
性能影响不大，但语义偏差会显著拖慢重构节奏：当你想替换card__footer为Flex布局时，发现它其实还承担着标题分隔线功能，而名字完全没提示这点。
- 判断标准：把
__替换成“的”，读出来是否自然——form__submit-button→ “表单的提交按钮”，合理；form__bottom-bar→ “表单的底部栏”，模糊，建议改为form__actions - 避免用
left/right/top等方位词，布局方向可能随RTL或媒体查询变化 - 嵌套层级严格限制为1层：允许
list__item__text？不允许。应为list__item-text，因为text属于item这个元素，不是item的子元素
如何用BEM快速定位一段失效样式的源头
当某个input的边框颜色没生效，别急着查CSS文件，先看它class是什么：search-form__input search-form__input--error。这两个class已经锁定了三件事：它属于search-form块、是其中的input元素、当前处于error状态。接下来只需打开对应CSS文件，搜search-form__input，大概率10秒内找到目标规则。
相比传统命名（如.input-error），BEM把上下文直接编码进名字里，省去了“这个class到底用在哪个模块”的推理过程。
- 调试技巧：在浏览器控制台输入
getComputedStyle(document.querySelector('.xxx__yyy')).borderColor，快速验证是否命中预期规则 - VS Code推荐插件：
BEM Tools，支持从HTML class跳转到SCSS中对应的选择器定义 - 最容易被忽略的一点：BEM本身不解决样式污染，仍需配合CSS Modules或Shadow DOM才能真正隔离；光靠命名规范，无法阻止
.button--disabled被全局重置样式覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
