bem 通过将作用域编码进类名（如 search-form__submit）实现样式隔离，避免全局冲突；禁止无上下文规则、!important 和嵌套后代选择器，强调 block 功能闭环与命名一致性。
直接改 .btn 或 .header 这类泛化类名，90% 的概率会炸掉其他页面——不是你写得不对，是 CSS 没作用域，所有同名类都在全局抢权重。
为什么 BEM 能真正隔离样式，而不是靠加载顺序或 !important
浏览器按 <link> 顺序解析 CSS，但最终谁生效，取决于 specificity 和 !important。你改了 Button.css，发现按钮没变色，大概率是 LegacyTheme.css 里一条 .button { color: red !important; } 挡住了——这不是加载顺序能解决的，是作用域失控。
BEM 把作用域“编码进类名”：search-form__submit 和 modal__submit 天然不重叠，哪怕它们都引入了同一份 CSS 文件，也不会互相覆盖。
- 禁止写
.button:hover这类无上下文的通用规则；必须绑定 block，如search-form__submit:hover - 第三方库（如 Ant Design）的
.ant-btn不受你控制，但你可以用 wrapper block 隔离：.myapp-form-field--date .ant-date-picker -
!important是反模式：它会破坏 BEM 的 modifier 覆盖链，比如button--primary本该覆盖button的颜色，却被外部!important截断
Block 名怎么定才不会跨项目/模块冲突
Block 不是视觉容器，而是功能闭环单元。看到 .user-list 要立刻判断：它是否能独立渲染、有明确输入输出、不依赖父级 DOM 结构？否则就是伪 Block。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 合格 Block：
.search-form（含输入框+提交按钮+清空逻辑）、.notification-badge（含计数、角标、点击跳转） - 不合格 Block：
.section-2（纯视觉分组）、.left-sidebar（含位置词）、.red-text（含样式词） - 跨项目迁移时，所有 block 名必须带明确业务前缀，如
salesforce-form、legacy-modal，否则.header__title在两个项目里规则不同，合并后后者直接覆盖前者
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--primary button--disabled正确，button--primary--disabled是反模式 - Element 级 Modifier 必须带 Block 前缀：
card__title--highlight正确，title--highlight错误（脱离上下文）
最常被忽略的一点：BEM 不是起个带双下划线的名字就完事，它本质是把“谁在管这个样式”编码进类名里。一旦 Block 名和真实 DOM 脱节（比如写了 .header__nav-item，但 HTML 是 <nav class="header-nav"></nav>），整个 BEM 结构就失效了——这比没写还危险，因为看起来像对了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
