BEM 的本质是通过 block__element--modifier 命名结构划清样式归属边界，而非单纯加长 class 名；它模拟组件封装，确保样式仅作用于特定 UI 单元，避免全局污染与冲突。
为什么 class 名一长就失控？BEM 不是起名规则，是作用域切分
CSS 没有天然的作用域，.btn 在哪都能生效，哪怕它本该只属于某个弹窗里的操作区。BEM 的核心不是让名字变长，而是用命名结构强行划出「这个样式只归这个组件管」的边界。block__element--modifier 这套写法本质是在模拟组件封装——modal__close-btn--disabled 一眼能看出它属于 modal 块，是 close-btn 元素，处于 disabled 状态，跟其他 btn 完全无关。
常见错误现象：.btn 被全局 reset 影响、第三方 UI 库的 .btn 覆盖了自己写的、改一个按钮样式结果所有 .btn 都变了。
- 不要把 BEM 当成“加前缀”，而要当成“声明归属”：每个
class必须能反向定位到唯一组件文件或区块 -
block名必须对应真实可复用的 UI 单元（如header、product-card），不能是语义化泛称（如section、container） - 嵌套层级超过
block__element__subelement就该拆组件，BEM 不支持三层以上元素嵌套
怎么避免 __ 和 -- 写错位置？用工具链卡死语法
BEM 手写容易错：把 menu__item--active 写成 menu--item__active，浏览器不报错，但预处理器或 CSS-in-JS 工具可能无法识别修饰符，导致样式失效或热重载异常。
使用场景：团队协作、老项目渐进式改造、CI/CD 流水线中做样式合规检查。
立即学习“前端免费学习笔记（深入）”；
- 在 ESLint 中接入
stylelint-selector-bem-pattern插件，强制校验class命名格式 - Vite / Webpack 构建时加
postcss-bem，自动将&__content编译为.card__content，减少手误 - VS Code 安装
BEM Tools插件，输入.card__自动补全元素，.card--补全修饰符
:global() 和 :local() 混用时，BEM 还有效吗？
在 CSS Modules 或 Vue <style module></style> 中，:global(.modal__overlay) 会逃逸作用域，破坏 BEM 的隔离性。一旦用了 :global，这个类就又变成全局污染源。
性能影响：CSS Modules 本可对 local 类做哈希混淆（如 modal__overlay_abc123），但 :global 类保留原名，压缩率低，且无法 Tree-shaking。
- 只在必须对接外部库（如第三方富文本编辑器输出的 HTML）时才用
:global，且限定在最小选择器粒度，例如:global(.ql-editor p)，而非:global(.ql-editor) - React 中优先用
clsx动态拼接local类，而不是退回到全局class - Vue SFC 中避免
<style scoped></style>和<style module></style>混用，二者作用域模型冲突
伪类和响应式断点怎么塞进 BEM？别硬塞，用修饰符接管
有人写 .button:hover 或 @media (min-width: 768px) { .button__text { ... } }，这会让 BEM 边界失效——hover 是状态，不是组件自身的一部分；媒体查询是环境条件，不该由组件内部决定布局逻辑。
正确做法是把状态和环境映射为修饰符，在 JS 层控制类名切换。
- 交互状态统一走
--hover、--focus、--pressed修饰符，由事件监听器添加/移除，而不是靠伪类 - 响应式行为交给父容器修饰符驱动，例如
layout--tablet .card__image控制图片尺寸，组件自身不写媒体查询 - 动画用
--animating修饰符 + CSS transition，避免在:hover里写transition导致状态不可控
最易被忽略的一点：BEM 的边界感不在命名长度，而在「谁有权增删这个 class」。如果设计师给的标注稿里写的是 .btn-primary，而你硬改成 form__submit-btn--primary，却没同步更新所有调用方的 JS 逻辑，那再规范的命名也白搭。
