深层嵌套选择器使维护困难，因dom任一层变动即导致样式失效、权重高复用性差；BEM通过单类名命名（块__元素–修饰符）解耦结构依赖；css Modules等方案实现样式隔离；仅主题切换和响应式断点内嵌套合理。
为什么深层嵌套选择器会让维护变困难
当你看到 .header .nav .menu-item .link:hover 这类选择器时，它表面上能精准命中元素，但实际意味着：DOM 结构任何一层变动（比如 .nav 改成 .navigation），整个样式就失效；多人协作时，没人敢轻易动 html 层级，怕“牵一发而动全身”。更麻烦的是，这类选择器权重高、复用性差，想在另一个模块复用同款按钮样式？得重写一遍或强行加 !important。
用 BEM 命名约束选择器层级
BEM 不是银弹，但它把“结构依赖”显式转为“命名约定”，从而砍掉对 DOM 深度的隐式依赖。核心是只用单类名，不靠嵌套：
-
.button是块（Block）——独立可复用的组件 -
.button__icon是元素（Element）——仅属于.button的子部分，不单独存在 -
.button--primary是修饰符（Modifier）——描述状态或变体，不影响结构
这样写出来的 CSS 就不会因为父容器改名而崩，HTML 里也只写 class="button button--primary"，无需关心它嵌在哪几层 div 里。
如何避免模块间样式污染和冲突
即使用了 BEM，如果所有类名都平铺在全局，.modal 和第三方库的 .modal 仍可能打架。解决方案不是加前缀（如 .myapp-modal），而是让作用域真正隔离：
立即学习“前端免费学习笔记（深入）”；
- 用 CSS Modules：构建时自动哈希类名，
import styles from './Button.module.css'后，styles.button对应唯一字符串 - 用
:scope或scoped（vue）限制样式生效范围，但注意:scope在伪类中支持有限，慎用于:hover等场景 - 避免跨模块依赖类名：不要在
Header.module.css里写.button--disabled的样式，那是Button自己该管的事
什么时候必须保留少量嵌套？
完全禁用嵌套不现实。以下两种情况合理保留：
- 主题切换：用
.theme-dark .button覆盖颜色，比每个按钮都加--dark修饰符更轻量 - 响应式断点内限定作用域：
@media (max-width: 768px) { .sidebar .menu-item { display: none; } }—— 这里嵌套是语义需要，而非结构强耦合
关键判断标准：这个嵌套是否“随 DOM 变动而失效”？如果删掉某层父元素，样式就错乱，那它本质上还是结构依赖，得重构。