BEM是一种强制组件边界清晰的CSS命名方法论，要求每个class严格对应block、element或modifier单一语义层级，禁止拼凑式命名与跨层级嵌套。
什么是BEM，为什么不能直接套用 class="btn btn--primary btn__icon"
这不是BEM，是拼凑。BEM要求每个 class 名必须严格对应一个且仅一个语义层级：block、element 或 modifier。像 btn__icon 看似合理，但如果 icon 在 DOM 中实际是独立组件（比如复用在导航、卡片里），它就不该作为 btn 的子元素存在——这会绑架结构、阻碍复用。
真正 BEM 的起点是组件边界清晰：一个 button 是 block；它的内部图标如果只服务于按钮自身（不单独暴露行为或样式接口），才能叫 btn__icon；否则就该是独立的 icon block。
常见错误现象：
- 把语义上可复用的节点硬写成
__元素（如header__logo，但 logo 也在 footer 复用） - 用
--修饰符覆盖布局属性（如btn--full-width设置width: 100%），导致 modifier 被迫承担容器职责 - HTML 中出现多层嵌套 BEM 类（
card__content__title）——BEM 不允许 element 嵌套 element
HTML 中怎么写才符合 BEM 规范
核心原则：每个 class 只表达一种角色，且 block 名必须与组件名完全一致；element 和 modifier 必须挂载在直属父 block 上。
立即学习“前端免费学习笔记（深入）”；
正确示例（Button 组件）：
<button class="btn"> <span class="btn__text">Submit</span> <span class="btn__loader"></span> </button>
若需变体，用 modifier：
<button class="btn btn--loading"> <span class="btn__text">Submitting...</span> <span class="btn__loader"></span> </button>
关键约束：
-
btn__text和btn__loader必须是btn的直接子元素（不能隔一层 div） - 不允许出现
btn__text__highlight—— text 是 element，不能再有子 element - modifier
btn--loading作用于 block 自身，不是加在btn__text上 - 所有 class 都应出现在 HTML 中，CSS 里不生成组合选择器（如
.btn.btn--large .btn__text是反模式）
遇到“这个东西既像 element 又像独立 block”怎么办
这是 BEM 实战中最常卡壳的地方。判断依据不是视觉位置，而是**是否具备独立封装能力**：能否脱离当前 block 单独使用、配置、测试？
典型场景和处理方式：
- 弹窗里的关闭按钮：
modal__close❌（关闭按钮逻辑/样式可能复用于 toast、drawer）→ 应为独立close-btnblock - 表单中带图标的输入框：
input-with-icon是 block，input-with-icon__input和input-with-icon__icon是 element；但icon本身应是iconblock，通过input-with-icon__icon容器包裹并控制尺寸/对齐 - 列表项中的头像：
user-list__item下的头像，若只用于用户列表，且无独立交互或配置需求，可作user-list__avatar；一旦需要在个人资料页复用，立刻拆为avatarblock
简单口诀：能抽成 React/Vue 组件的，就是 block；只是样式分组或 DOM 定位辅助的，才是 element。
CSS 里怎么配合 HTML 写出真正 BEM 友好的样式
BEM 的 CSS 不是命名游戏，而是强制解耦。所有样式必须基于单个 class，禁止依赖父子关系或标签类型。
正确写法：
.btn { }
.btn__text { }
.btn--disabled { }
.btn--disabled .btn__text { } /* 允许，因为 modifier 影响自身 block 下的 element */
错误写法（破坏 BEM 原则）：
.btn span { } /* 依赖标签，不可控 */
.btn > .btn__text { } /* 依赖父子关系，嵌套过深 */
.card .btn { } /* 跨 block 依赖，btn 失去独立性 */
性能与维护提示：
- 不要为了“更短”省略 block 名，
__text不合法，必须是btn__text - modifier 类名应描述状态或意图（
btn--success），而非样式（btn--green） - 当 modifier 过多时（如
btn--primary--large--loading），说明 block 职责过重，该拆分
BEM 的复杂点不在语法，而在于每次加 class 前都得问一句：它属于谁？能不能活下来？
