双下划线__是直属归属声明，表示element为block的直属组成部分，与DOM嵌套深度无关；禁止写header__nav__link等多级形式，必须严格遵循block__element单层结构。
双下划线 __ 不是分隔符，而是直属归属声明
它不表示“路径”或“嵌套层级”，只表达一个语义事实：这个 element 是该 block 的**直属组成部分**，和 HTML 结构深度无关。写成 header__nav__link 并不因为 DOM 里有三层嵌套就合理——BEM 不认 DOM 深度，只认语义归属。
-
header__logo✅ 正确：logo 属于 header 块，且是其固有、不可拆分的视觉单元 -
header__nav✅ 合理：nav 是 header 的一部分，不是独立功能块 -
header__nav__link❌ 错误：link 不直属 header；应改为header__link或提取为独立块nav-item -
user-card__content__avatar❌ 违反原则：content 是并列元素，不是容器；avatar 应直接隶属user-card，即user-card__avatar
为什么不能用单下划线或连字符替代 __
工具链（PostCSS 插件、IDE 补全、clsx/BEM 工具）全靠 __ 精准识别 block-element 边界。换成 _ 或 -，解析器会直接放弃处理，但不报错——问题拖到运行时才暴露。
-
menu_item→ 被误判为 block=menu、element=item，但若真实 block 是user-menu，则完全无法拆解 -
button-icon→ IDE 类名跳转失效，Sass 中&__icon编译出错 -
form_input--disabled→ 修饰符逻辑错位：input 是 element，必须写成form__input--disabled
双连字符 -- 必须紧贴前一部分，且不能省略 __
修饰符不是独立存在，它必须明确依附于某个 block 或某个 block__element。漏掉 __ 就等于改写了作用域。
-
button--disabled✅ 修饰整个 button 块 -
menu__item--active✅ 修饰 item 元素，__item不可省略 -
menu__item-active❌ 少一个-，变成item-active，被当成新 element 名，语义断裂 -
card--expanded card__header--collapsed❌ 业务逻辑矛盾：同一卡片既展开又折叠，状态管理失控
动态生成类名时最易踩的坑
Vue/React 里用模板字符串拼 ${block}__${el}，一旦 el 来自 props 且含空格、大写或非法字符，产出的类名就无效。
立即学习“前端免费学习笔记（深入）”；
-
user-card__first name→ 空格导致 CSS 选择器中断 -
user-card__Avatar→ 大写不符合 BEM 全小写要求，团队协作中搜索失效 - 推荐用
bem-cn或@bem-react/classname自动 sanitize - 手动拼接前务必 normalize：转小写、去空格、非法字符替换为
-
BEM 的 __ 和 -- 是硬性语义锚点，不是风格选项。写错一字符，类名就脱离规范，后续所有自动化工具、团队对齐、跨项目复用都会悄悄失效——尤其当组件被挪到新项目时，错误命名会像幽灵一样持续冒泡。
