BEM类名能直接回答“这是谁的、是什么、当前什么状态”三个问题，如product-card__title--warning表明它是product-card块中的标题元素且处于warning状态；Element命名须准确描述结构角色而非样式或行为，禁用嵌套和泛化词。
BEM类名本身就能回答“这是谁的、是什么、当前什么状态”三个问题，不需要额外注释或翻文档就能看懂样式归属和用途。
类名直接暴露组件结构和上下文
传统命名如 .title 或 .red 没有上下文，你得点开HTML才能确认它属于哪个模块、是否被复用；而 product-card__title--warning 一眼可知：它是 product-card 这个块里的标题元素，当前处于 warning 状态。浏览器不关心语义，但人眼扫过去就自动还原出结构关系。
常见错误现象：user-card__delete-btn 看似合规，但 delete-btn 是行为动词，不是结构角色——它到底是按钮？图标？还是文字链接？没人能单凭类名判断。应改为 user-card__action--delete，把动作语义交给 modifier 承载。
- Block 名必须是独立功能单元（
search-form✅，form❌） - Element 名只描述角色，不描述样式或行为（
search-form__submit✅，search-form__big-btn❌） - Modifier 必须对应可枚举的状态（
--disabled✅，--left❌）
不用再写三类高频 CSS 注释
团队落地 BEM 后，以下注释基本可以删掉，且不会影响后续维护：
立即学习“前端免费学习笔记（深入）”；
-
/* 产品卡片价格 */→ 类名product-card__price已说明归属 -
/* 仅限侧边栏使用 */→sidebar__item不依赖父容器，挪到哪儿都生效 -
/* 禁用时隐藏边框 */→input--disabled本身已表达状态含义
但别误以为“所有注释都能删”。非直观兼容处理（如 /* Safari flex gap hack */）、跨端联动逻辑（如 /* 同步 JS 的 data-state="loading" */）、Modifier 隐含约束（如 /* card--featured 必须配合 card__image */）仍需保留注释。
Element 名写不准，自解释性立刻归零
真正难的不是记住语法，而是让所有人对“什么是元素”达成一致。比如 card__header__title 是典型错误：BEM 不允许嵌套 Element，__header__title 违反了 “Element 只能是 Block 的直属子内容” 这条铁律。正确做法是拆成 card__header 和 card__title，或者把 header 升级为独立 Block。
更隐蔽的问题是泛化命名：card__content 看似合理，但 content 是个筐，什么都能往里塞，后期加个图片、按钮、描述后，别人无法判断这个 class 到底管哪部分。应按实际角色命名：card__image、card__body、card__footer。
一旦 Element 名带样式词（big、left）、行为词（delete、click）或模糊词（content、item），类名就失去自解释能力，退化成另一种需要查文档才能理解的“黑盒”。
