BEM类名应是DOM结构的文本镜像，需能反向还原节点在组件中的归属与层级；错误示例中冗余wrapper破坏语义对齐，应删除无意义包裹层。
直接写 class="card__title--large--theme-dark" 会让 HTML 源码一眼看不出结构关系，这不是 BEM 的问题，而是没把类名和 DOM 节点语义对齐——BEM 类名本该是 DOM 结构的“文本镜像”，而不是脱离结构的字符串堆砌。
怎么让 class 名一眼对应真实 DOM 层级
BEM 类名必须能反向还原出节点在组件中的归属和层级，否则就失去可读性。关键不是缩写，而是删掉无意义 wrapper。
- ❌ 错误结构：
<div class="card"><div><div class="card__title">.../div></div>—— 中间那个<div>没类名、没语义、不复用，纯属干扰项 - ✅ 正确结构：
<div class="card"><h2 class="card__title">.../div>——card__title直接挂card下，且用<h2>标签强化语义 - 如果真需要中间容器（比如要加动画或布局控制），它就得有业务含义：
<div class="card__header"><h2 class="card__title">...</h2></div>，此时card__header是合法 Element，不能叫card__wrapper或card__inner
Element 命名里为什么不能出现标签名或位置词
类名里塞 div、container、inner 这类词，等于放弃语义，只描述结构——而结构会变，语义才稳定。
- ❌
card__div-title、card__container-header、card__inner-content—— 审查元素时你得猜“这个 container 到底干啥？” - ✅
card__title、card__actions、card__footer—— 看名字就知道职责，且和 DOM 中的<h2>、<div class="card__actions">一一对应 - 特别注意：
card__content是高危命名——它几乎总是泛指“剩下所有东西”，缺乏具体职责。优先拆成card__body、card__meta、card__actions等可枚举的 Element
Modifier 多个同时用时怎么保持可读性
class="btn btn--primary btn--large btn--loading" 比 class="btn--primary--large--loading" 更易读，因为每个 Modifier 都独立、可开关、可搜索。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- Modifier 必须和 Block 同时存在：
btn--loading单独出现是无效的，btn btn--loading才是完整语义单元 - 多个 Modifier 不拼接，用空格分隔：浏览器解析快，Git diff 清晰，代码审查时能单独勾选某一个状态做测试
- 避免长链式 Modifier：
card--featured--on-homepage--with-cta是信号：这个 “on-homepage” 不是组件自身状态，而是容器约束，应由父级homepage__featured-cards控制，或用媒体查询 +card--featured组合
编辑器里怎么快速验证 BEM 是否对齐 DOM
别靠肉眼扫，用工具锚定一致性。VS Code 中装插件 Auto Rename Tag + Highlight Matching Tag 是基础，但真正管用的是结构化校验。
- 在 JSX/HTML 文件中，把光标停在
card__title上，按 Ctrl+Click（或 Cmd+Click）应能跳转到card.module.css里的.card__title定义 —— 如果跳不到，说明类名没被 CSS Modules 正确导出，或命名不一致 - 运行
npx postcss-bem-linter components/card/card.css，它会报错Unexpected element selector ".card__title__icon"或Missing block selector ".card"，这类错误比人眼更早发现结构错位 - 禁用任何“自动补全 BEM 类名”的 Snippet 工具——它容易生成
card__content__title这种嵌套，而真正的 BEM 只允许一层__
最常被忽略的一点：BEM 类名可读性崩塌，往往始于第一个没想清楚的 wrapper div。它不报错、不阻断功能，但从此每个后续类名都多一层猜测成本。删掉它，或者给它起一个真能被复用、被测试、被文档化的名字——否则它就不该存在。
