原生CSS嵌套与CSS变量功能独立，嵌套不改变变量作用域，var(--color-primary)在任何层级均可访问；BEM项目禁用嵌套因其违背类名自洽原则；超3层嵌套虽不影响变量值，但显著降低选择器匹配性能。
原生CSS嵌套不能直接提升颜色变量的可读性，它和CSS变量是两条独立路径——嵌套管结构，变量管语义；强行混用反而破坏两者优势。
嵌套选择器里引用CSS变量是否可行？
可行，但必须明确：嵌套本身不改变变量作用域，var(--color-primary) 在任何嵌套层级都能访问，前提是变量已定义在 :root 或当前作用域内。
- ✅ 正确写法：
.card { color: var(--color-text); &__title { font-size: var(--font-size-lg); } } - ❌ 错误假设：以为嵌套能“局部化”变量，比如写
.theme-dark { --color-text: #fff; .card { color: var(--color-text); } }—— 这样变量确实生效，但不是嵌套带来的能力，而是CSS变量天然支持作用域继承 - ⚠️ 注意：嵌套层级不影响变量查找顺序，浏览器仍按CSS作用域规则向上找，不会因嵌套变深就优先取父级定义
为什么在BEM项目中禁用原生嵌套？
BEM要求每个类名自洽、无上下文依赖，而原生嵌套（如 .card { .card__title { } }）本质是用父选择器制造隐式依赖，与BEM哲学冲突。
- 一旦抽离
.card__title到其他容器，样式立即失效 - 团队协作时，新人看到
.card__title就知道它是独立单元；看到.card .card__title就得查父元素是否存在、是否被重命名 - 构建工具（如PostCSS）处理嵌套时，若同时启用BEM插件，可能产出冗余选择器，如
.card .card__title.card__title
嵌套深度超过3层时，颜色变量会受影响吗？
不会直接影响变量值，但会显著拖慢选择器匹配性能，间接让颜色变更的视觉反馈变卡顿。
立即学习“前端免费学习笔记（深入）”；
- 浏览器从右往左匹配，
.a .b .c .d { color: var(--color-primary); }需遍历所有.d元素，再逐层验证祖先 - DOM节点越多、设备越低端，这种开销越明显——尤其当
--color-primary用于动画或频繁切换的主题中 - 实操建议：3层嵌套已达临界点，第4层应拆解，例如把
.modal .content .header .title改为.modal__title+ 独立变量--modal-title-color
真正提升可读性的组合是：用CSS变量承载语义（--color-error 而非 red），用BEM或原子类组织结构，原生嵌套仅作为临时补救手段——比如第三方组件无法改class时，用2层以内嵌套最小化侵入。
