bem 通过 block__element--modifier 三段式实现样式隔离，.user-card__avatar 与 .profile-card__avatar 不冲突，因 block 名（user-card、profile-card）构成独立命名空间，element 和 modifier 必须依附 block 使用，禁止脱离上下文单独定义或嵌套。
直接写 .btn 或 .header 必然导致样式冲突，BEM 不是“让名字变长”，而是用 block__element--modifier 三段式把样式归属、层级和状态全部锁死在类名里。
为什么 .user-card__avatar 不会和 .profile-card__avatar 冲突
BEM 的 Block 名（如 user-card）必须语义唯一、功能独立，它天然构成命名空间。两个不同 Block 下的同名 Element（__avatar）互不影响——这和 CSS Modules 自动生成哈希类名的思路一致，只是 BEM 靠人写，不靠工具。
常见错误现象：.avatar 被同时用于用户页、设置页、评论区，结果改一处圆角，三处头像都变；或 .card .avatar 这种后代选择器，HTML 里加个 wrapper 就失效。
-
user-card和profile-card是两个隔离的 Block，哪怕都含__avatar，编译后也是完全不同的类名 - Element（
__avatar）不能脱离 Block 单独写样式，否则违反 BEM 原则，也失去复用前提 - Modifier（如
user-card--compact）必须和 Block 同时存在，避免只加--compact导致基础样式丢失
SCSS 中怎么写才不破坏 BEM 扁平结构
SCSS 嵌套本身不危险，危险的是嵌套出后代选择器。BEM 要求最终 CSS 类名是扁平的（.user-card__avatar），不是依赖 DOM 层级的（.user-card .avatar）。
错误写法：.user-card { .avatar { ... } } → 编译出 .user-card .avatar，破坏封装性，且无法从类名反推来源。
- 正确写法只用
&__和&--：.user-card { &__avatar { ... } &--loading { ... } } - 禁用空格嵌套：
&__avatar { &__icon { ... } }是非法的，BEM 不允许__嵌套 - 真需要图标变体？用
user-card__avatar--with-icon，而不是新增一层__icon
React/Vue 组件里动态类名怎么拼才不易出错
手写字符串拼接（className={`user-card__button ${isDisabled ? 'user-card__button--disabled' : ''}`）易漏、难维护。关键不是“怎么拼”，而是“谁来管 Block 名”。
- 每个组件顶部定义常量：
const BLOCK = 'user-card'，所有类名基于它生成 - 用
clsx或classnames收敛逻辑，但别让它掩盖结构问题——传入`${BLOCK}__button`前，先确认user-card确实定义了__button元素 - 禁止 Modifier 单独使用：
button--disabled必须和button共存，否则基础边框、颜色等可能丢失 - 状态类名别塞进 JS 变量里：
const statusClass = isPrimary ? 'button--primary' : 'button--secondary'→ 这会让button--primary失去和button的绑定语义
老项目接入 BEM 最容易被忽略的边界点
不是“改完所有 .btn”，而是守住三个交界：新组件、第三方库包裹层、旧类名日志监控点。BEM 的价值在隔离，不在重命名。
- 第三方组件（如 Ant Design 表格）不强行改其 class，而用 wrapper Block 包裹：
<div class="my-dashboard__ant-table">...</div>，再局部覆盖 - 旧代码保留
.btn，但新建文件强制启用stylelint-selector-bem-pattern规则，CI 拦截非 BEM 类名 - 禁止在 BEM Block 内部混用 utility class 控制核心样式，比如
user-card__title text-2xl font-semibold可以，但user-card__title mt-4不行——mt-4是布局微调，不该参与组件语义 - 最常漏的一点：Block 名必须小写+中划线，
userProfile是错的，user-profile才对；否则 grep、调试、团队协作全乱套
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
