深层嵌套选择器使维护困难，因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），而是让作用域真正隔离：
