BEM是一套CSS命名约定，解决多人协作中的样式冲突与重构难题；通过Block-Element-Modifier三级结构实现样式作用域可控，避免嵌套选择器失效和全局污染。
什么是BEM，它解决什么实际问题
模块化CSS不是靠文件拆分实现的，而是靠命名约束让样式作用域可控、可预测。BEM（Block-Element-Modifier）本质是一套命名约定，不是框架或工具——它不改变CSS运行机制，但能大幅降低多人协作时的样式冲突和重构成本。
常见错误现象：.header .nav .item:hover 这类嵌套选择器，一旦组件挪到新页面或被其他样式干扰，hover效果就失效；更糟的是，改.item可能意外影响所有叫item的元素。
使用场景：中后台系统、组件库、需要长期迭代的业务模块（比如订单卡片、用户头像组、筛选表单）。
- Block 是独立功能单元，如
search-form、product-card - Element 必须属于某个 Block，用双下划线连接，如
search-form__input、product-card__price - Modifier 表示状态或变体，用双连字符，如
search-form--compact、product-card__price--discount
BEM命名怎么写才不踩坑
很多人以为加了__和--就是BEM，结果写出user-info__avatar--large这种“伪BEM”——user-info是Block，avatar是Element，但large修饰的是avatar本身，不是user-info的状态，所以应写成user-info__avatar--large是对的；但如果large其实是整个user-info的尺寸变体，那就要写成user-info--large并配合内部重置，而不是塞给Element。
容易踩的坑：
- 避免跨Block修饰：不要写
button__icon--primary，primary是button的状态，应为button--primary__icon - Modifier 不要单独使用：不能只写
button--primary而不带button，否则语义断裂，也破坏复用性 - Element 不能嵌套：禁止
form__field__label，应扁平为form__field和form__label，必要时用 Block 组合
CSS-in-JS 或 CSS Modules 下还用得着BEM吗
用得着，而且更关键。CSS Modules 默认哈希类名解决了全局污染，但没解决语义混乱——styles.container 和 styles.content 到底谁包谁？别人读代码时还是得猜。BEM在这里提供的是「人类可读的语义骨架」。
实操建议：
- 在 CSS Modules 中，把 BEM 名作为原始类名写进
.module.css，例如：.card { } .card__title { } .card--fluid { }，然后在 JS 中通过styles.card引用——类名依然清晰，又享受局部作用域 - 在 styled-components 或 Emotion 中，可用
as或className显式保留 BEM 类名，方便调试和 SEO（如服务端渲染时的 class 属性可读） - 别为了“自动命名”放弃 BEM 结构：比如用
css`&__title{}`模拟嵌套，不如直接写title: css``并保持命名一致性
为什么BEM项目里仍会出现样式泄漏或覆盖失败
根本原因往往不在命名，而在选择器权重和层叠逻辑被忽略。BEM不等于低权重——.button--primary.button__text 这种写法虽然合法，但权重飙升，反而比单纯 .button__text--primary 更难覆盖。
性能与兼容性影响：
- 过深的 BEM 链（如
.layout__sidebar__nav__item--active）不仅难维护，还会触发某些旧版浏览器的 CSS 解析性能下降 - Modifier 的样式必须基于 Block 或 Element 声明，不能依赖顺序：写
.button--primary { color: blue; }后再写.button { color: black; }，后者会覆盖前者——BEM 要求 Modifier 写在基础样式之后，且用相同选择器层级 - 用 PostCSS 插件（如
postcss-bem）自动生成类名时，注意它不校验语义，可能把div错标为block，最终产出一堆“语法正确但逻辑错乱”的类
最常被忽略的一点：BEM 只管命名，不管样式职责划分。一个 product-card 的边框、阴影、响应式断点、动画，该抽成工具类还是内联写死，得靠团队约定——否则命名再规范，照样出现 200 行的 product-card.module.css。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
