BEM类名必须严格绑定语义层级：Block需带业务含义（如user-card），Element仅限直属子节点（禁止card__content__title），Modifier须与Block共存（如btn btn--loading），且btn__icon合法而btn-icon非法。
HTML里怎么写BEM类名才不算错
直接在class属性里写对名字，是BEM落地的第一关。错不在语法，而在语义绑定是否成立。
常见错误现象：header__logo用在多个不同上下文（比如main-header和modal-header共用），结果样式互相干扰；或card__content__title这种双下划线嵌套，违反BEM“元素不能有子元素”的硬约束。
- Block名必须带业务含义，禁用泛标签名：用
user-card，不用card；用search-form，不用form - Element只能是Block的**直接子节点**：如果DOM结构是
<div class="user-card"><div class="user-card__info"><h3 class="user-card__name"></h3></div></div>，那user-card__name就合法；但若中间隔了一层没命名的div，它就不是user-card的直属子元素，类名就得重审 - Modifier必须和对应Block或Element**同时出现**：
<button class="btn btn--loading"></button>✅，<button class="btn--loading"></button>❌（缺少基础Block类）
为什么btn__icon可以，btn-icon不行
因为btn-icon会被当作一个独立Block，和btn无任何语义关联。一旦你后来在别处也用了btn-icon（比如在nav里放个按钮图标），它的样式就可能被btn的CSS意外覆盖或冲突。
而btn__icon明确宣告：“这玩意儿只活在btn的地盘里，离开btn就失去意义”。它不承诺复用，只承诺归属。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- Element名不带父级语义：
btn__icon✅，btn__btn-icon❌（冗余） - 如果图标确实要跨组件复用（比如
user-card__avatar和nav__logo都用同一套图标逻辑），那就该单独抽成iconBlock，而不是硬塞进某个__里 - React等框架中，别在JSX里手动拼
btn__icon——用常量统一管理，比如const ICON = `${BLOCK}__icon`，避免散落多处导致命名不一致
.btn__text能加--disabled吗
能，但得想清楚：这个禁用态，是btn整体的状态，还是仅btn__text自己的视觉降级？
多数情况下，禁用是按钮整体行为，所以应该用btn--disabled控制整个Block，再让.btn--disabled .btn__text做微调——但这违反BEM“禁止后代选择器”的原则。正确做法是：把状态下沉到元素级Modifier，即btn__text--disabled，前提是它真能独立表达“文本不可操作”这一语义。
- Modifier只开关状态，不改变结构：用
btn--loading表示按钮进入加载态，内部自动显示spinner；不用btn--in-modal这种描述容器位置的修饰符 - 多个Modifier平级组合：
btn--large btn--primary btn--loading✅，顺序无关；btn--large-loading❌（造新词，破坏可预测性） - Element Modifier优先于Block Modifier生效：若
.btn__text--disabled和.btn--disabled同时存在，前者应覆盖后者对文本的样式影响
遇到“既像Element又像Block”的节点怎么办
这是BEM实战中最容易卡住的地方。判断标准只有一个：它能不能脱离当前父Block，独立配置、测试、复用？
比如用户头像：user-card__avatar看似合理，但如果这个头像组件还用在notification-item和comment里，且每处都需要不同尺寸、圆角、边框，那它就不是user-card的附属Element，而是独立avatar Block。
- 独立Block可带自身Modifier：
avatar avatar--sm avatar--rounded，而不是user-card__avatar--sm - 若必须保留在父结构内（如SEO或无障碍要求），可用
data-属性辅助，比如<div class="user-card__avatar" data-avatar-size="sm">，CSS用<code>[data-avatar-size="sm"]匹配，避免类名爆炸 - 真正难解的是“视觉嵌套但逻辑独立”的场景，比如表格单元格里的徽标：
table-cell__badge不如直接badge badge--in-table-cell——Badge是Block，badge--in-table-cell只是它的一种使用上下文，不绑架结构
BEM不是字符串生成器，它强制你每次写
class前问一句：这个东西，到底属于谁？能不能自己活？一不留神，__就写成了耦合锁链，--就写成了样式补丁。
