BEM规范中块必须独立可复用、元素仅直属于块且不可脱离、修饰符只作用于块或元素本身且不改变DOM结构；判断block还是element关键看能否脱离上下文复用，如.logo多处复用即为块，.card__avatar仅属卡片即为元素；基础类名不可省略，__和--拼写错误将导致选择器失效。
块是能独立存在、有明确功能的组件；元素是它内部不可拆分的组成部分；修饰符只描述状态或变体，不改变结构。三者不能混用，也不能省略基础类名。
怎么判断一个类该是 block 还是 element
关键看它能不能脱离上下文复用：.logo 在 header、footer、弹窗里都用同一套样式？那它是 logo 块；如果只出现在 card 里，且换到别处就失去语义或样式错乱，那它该是 card__avatar 元素。
常见误判点：
- 把
container、wrapper当成块——它们只是布局占位，没功能语义 - 把
card-header当成块——其实是card__header元素，因为 header 不具备跨组件复用能力 - 看到 DOM 嵌套深就加层级：
card__body__title是非法的，应为card__title或新增card__body块
为什么 card__title--large 必须和 card__title 一起写
修饰符不是替代，而是增强。CSS 规则 .card__title--large 通常依赖 .card__title 的基础样式（比如字体大小、行高、颜色），单独加 --large 类，等于跳过了基础定义。
立即学习“前端免费学习笔记（深入）”；
实际 HTML 必须这样写：
<h3 class="card__title card__title--large">标题</h3>
否则会出现：
- 样式完全不生效（基础类缺失，选择器匹配失败）
- 调试时发现类名写了但没效果，最后发现只是漏了一个
card__title - 团队协作中有人为“减少 class 数量”删掉基础类，导致局部样式断裂
__ 和 -- 写错会怎样
拼写错误不会报错，但会让选择器彻底失效，而且极难排查。
典型手误：
-
card_title（单下划线）→ BEM 工具链无法识别，浏览器当普通类名处理 -
card__title--large写成card__title-large（少一个-）→ 变成card__title-large，不是修饰符，CSS 规则不匹配 -
Card__Title（大小写混用）→ CSS 类名区分大小写，HTML 写card__title就对不上
建议在编辑器里装 BEM 校验插件（如 VS Code 的 BEM Tools），实时标红错误命名。
修饰符挂在哪一层才合理
只能挂在 block 或 element 上，不能跨层，也不能“修饰修饰符”。
合法写法：
-
button--disabled（块级修饰符） -
button__label--hidden（元素级修饰符）
非法写法：
-
button--primary__icon（混用--和__） -
button__icon--large--blue（多个修饰符可共存，但前提是语义正交；--large和--blue若由同一主题系统控制，可能冲突） -
nav--vertical .nav__item（用后代选择器改子元素样式，破坏 BEM 隔离原则）
真正容易被忽略的是：修饰符只影响它所挂载的那个节点，card--horizontal 不会让 card__title 自动变排版——需要显式加 card__title--horizontal 或通过 JS 控制对应元素类名。
