element不能跨block复用类名，因为card__title和header__title虽结构相似但语义、样式上下文及js逻辑完全不同；bem要求每个__类名必须有且仅有一个明确的语义归属容器，脱离该容器将导致样式错乱、初始化遗漏与继承异常。
Element 为什么不能跨 Block 复用类名
因为 card__title 和 header__title 看似结构相似，但语义、样式上下文、JS 初始化逻辑完全不同。BEM 不是语法校验器，而是契约——它要求每个 __ 类名背后必须有且仅有一个明确的容器约束。
常见错误现象：
- 把
form__submit直接塞进<div class="modal"></div>里，结果按钮 padding 塌陷、文字垂直偏移——form__submit的line-height和padding依赖.form的font-size继承链 - 在 JS 中用
document.querySelector('.form').querySelectorAll('.form__*')初始化表单控件，但硬塞进来的form__submit因不在.form下而被漏掉 - 写
.card__title { margin-top: 1rem; }，结果header__title也意外继承了这个margin-top（如果 CSS 文件加载顺序靠后或权重更高）
block__element 名称中“block”到底指什么
不是 DOM 父元素，而是语义归属容器。比如 user-card__avatar 中的 user-card 是业务块名，不是 <div class="user-card"> 这个标签本身；哪怕你把 <code>user-card__avatar 写在 <section></section> 里，只要它逻辑上属于用户卡片组件，就必须挂载在 .user-card 下，否则就破坏了 BEM 的语义封装。
关键判断点：
- 这个元素抽出来单独用，是否仍能表达完整意图？
button__loader可以——它是按钮的一种状态表现；menu__item-icon不可以——脱离.menu后，它不知道该对齐哪边、尺寸怎么缩放 - CSS 是否显式或隐式依赖 Block 的布局属性？比如
card__content通常依赖.card的overflow: hidden和border-radius，抽离后圆角和裁剪都会失效 - 可访问性属性（如
role、aria-labelledby）是否由 Block 提供上下文？tabs__panel需要.tabs提供role="tablist"才能形成语义闭环
想复用视觉结构，该用 Modifier 还是新 Block
当发现 search-input__icon 和 filter-input__icon 几乎一样，说明它们不是“同一个元素”，而是“同一类功能单元”——这时候不该强行共享 __icon，而该确认：图标区域是否具备独立交互、可配置、跨场景复用的能力。
实操建议：
- 如果图标只负责显示、无事件、无变体、样式完全由父块控制 → 它不该有类名，删掉
search-input__icon，直接用<span></span>+ 继承处理 - 如果图标支持点击、有 loading 状态、需统一颜色主题 → 它就是独立 Block：
icon-button或status-icon，而不是任何块的__子元素 - 如果只是按钮多一个图标位置，其他行为样式不变 → 用 Modifier：
button--with-icon，再通过button--with-icon__icon控制内部结构，不破坏button的边界
HTML 中出现 block__element__subelement 就算违规
card__content__title 是典型错误。BEM 明确禁止 Element 嵌套 Element，因为这等于把两个语义层级压缩进一个类名，既模糊了归属（title 到底属于 card 还是 content？），又让 CSS 选择器权重失控（.card__content .card__content__title vs .card__content-title）。
正确做法：
- 把深层结构拆成独立 Block：
card-content→card-content__title，此时card-content是新 Block，不是card的 Element - 扁平命名：
card__content-title，表示“卡片内容区的标题”，仍是card的直接 Element，不引入新语义层级 - 若
content本身已承担复杂布局职责（如带滚动、分栏、工具栏），那就该是独立 Block：scrollable-panel，而非card__content
真正难的不是记住双下划线规则，而是每次加类名前，得想清楚：这个节点有没有自己的生命周期、样式边界和复用意图——没想清这点，后面所有命名都会漂移。
