原生 css nesting 禁止用于 bem 项目，因其生成带空格选择器（如 .card .card__header），违背 bem 单类名原则，导致样式失效与性能下降；必须使用纯单类名输出，如 .card__header。
原生 CSS Nesting 会破坏 BEM 的单类名前提
原生 CSS Nesting（@layer 之外的 & 嵌套）在编译后仍生成带空格的选择器，比如 .card { &__header { … } } 输出的是 .card .card__header。这直接违背 BEM “只用单类名选择器”的核心约束——浏览器要回溯父节点，性能下降；更关键的是，一旦 HTML 中 .card__header 被挪到其他容器下（比如嵌入弹窗或微前端子应用），样式立刻失效。
常见错误现象：.user-card__avatar 在 CSS 文件里被写成 .user-card { &__avatar { } }，开发时看着没问题，但上线后发现头像在侧边栏里不生效，查半天才发现是 DOM 结构变了，而嵌套选择器锁死了上下文。
- 禁止在 BEM 项目中启用原生 Nesting 的
&语法，哪怕构建工具（如 PostCSS、Vite）支持 - 如果必须用嵌套写法，仅限于预处理器（Sass/Less）且确保输出为纯单类名：
.user-card__avatar { }，而非.user-card .user-card__avatar - 检查构建产物：用
grep -r "\.[a-z]\+ \.[a-z]" dist/扫描是否残留空格选择器
BEM 类名本身已足够表达层级，Nesting 是冗余的
BEM 的 __ 和 -- 就是把结构关系“硬编码”进类名里，不需要靠 CSS 选择器嵌套来推断。看到 search-form__submit--loading，你就知道它属于 search-form 模块、是提交按钮、处于加载状态——HTML 里加这个类就行，完全不依赖父元素是否存在。
使用场景：组件被复用、SSR 直出、微前端子应用注入、后端模板渲染。这些场景下 JS 还没执行，CSS Modules 的哈希类名也还没生成，BEM 类名就是唯一契约。
-
search-form__submit和checkout-form__submit天然隔离，哪怕共用同一份 CSS 文件也不会冲突 - 修饰符挂载位置必须明确：
search-form__submit--disabled✅，search-form--disabled __submit❌（后者无法静态解析，也不符合 BEM 语义闭环） - 若真想“分组管理”，用
@layer或文件拆分（search-form.css只放.search-form相关类），而不是靠嵌套
真正需要 Nesting 的地方，BEM 已经让位给 CSS-in-JS 或 CSS Modules
当项目需要动态作用域（比如主题切换、运行时样式注入）、条件组合（is-open + theme-dark）、或与 JS 状态强绑定时，BEM 的静态命名就力不从心了。这时候该上 CSS-in-JS（Emotion、Linaria）或 CSS Modules，而不是硬塞 Nesting 进去。
参数差异：BEM 是人写的命名规则，靠团队守规矩；CSS-in-JS 是机器生成作用域，靠工具兜底。两者解决的问题不在同一层。
- 在
Button.module.css里继续用 BEM 风格命名：.button、.button__icon、.button--loading，再通过import styles from './Button.module.css'解构使用 - 避免混合：
.button { &__icon { } }+className={styles.button__icon}是错的——前者生成嵌套选择器，后者依赖哈希类名，两套逻辑打架 - 调试成本：原生 Nesting 让 DevTools 的 “Computed” 面板里出现多个匹配来源，而 BEM 单类名能精准定位到唯一声明处
最容易被忽略的一点：BEM 的可维护性来自“静态可读性”，不是“写得省事”
有人觉得用 Nesting 能少敲几遍 .card，但 BEM 的价值恰恰在于：你在 HTML 里看到 class="card__title--large"，就能立刻反查到 card.css 文件第 42 行；在 JS 里看到 el.classList.add('card__title--large')，就知道它只会影响标题，不会波及 .nav__title。这种确定性，比少打几个字符重要得多。
复杂点在于：BEM 不是命名技巧，是协作契约。它要求 HTML、CSS、JS 三端对同一个字符串达成一致——而 Nesting 把这种一致性交给了构建时的输出逻辑，一旦配置出错或工具链升级，整条链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
