css多层嵌套选择器拖慢维护，因其导致样式耦合强、复用难、调试定位困难；浏览器右向左匹配与人脑左向右理解错位，使修改成本指数上升；bem命名可有效规避该问题。
为什么 CSS 多层嵌套选择器会拖慢维护？
层级过深（比如 .header .nav .menu .item a:hover）直接导致样式耦合变强、复用困难、调试时难以定位来源。浏览器匹配 CSS 选择器是从右往左执行的，但人脑阅读和维护时是自左向右理解的——这种错位会让修改成本指数级上升。
- 改一个 DOM 结构，可能要同步调整 3–4 个地方的 CSS 选择器
- 团队协作中，新人不敢动
.layout .main .content .card .title这类选择器，怕牵一发而动全身 - Webpack 或 Vite 的 CSS 提取插件在压缩时，对深层嵌套优化有限，最终生成的 CSS 文件体积未必小
用 BEM 命名替代嵌套关系
BEM（Block-Element-Modifier）本质是把 DOM 层级语义“拍平”到类名里，让样式只依赖单一 class，彻底规避嵌套选择器。
错误写法：.card .card__header .card__title
正确写法：.card__title（直接作用于元素，不依赖父级）
- 所有子元素都带明确 Block 前缀，如
.card__body、.card--highlighted - 禁止使用类型选择器（如
h2）或 ID 选择器（如#header）参与组合 - 如果真需要条件样式，优先用 modifier（
.card--loading），而不是靠加一层父容器类来控制
什么时候必须保留嵌套？如何安全收口？
完全不用嵌套不现实，比如主题切换、媒体查询、伪类状态这些场景仍需局部组合。关键是控制深度 ≤ 2 层，并锁定作用域。
