后代选择器过长（如.header .nav .menu .item .link）导致样式脆弱、维护困难，应改用语义化class命名和BEM等局部作用域方案，仅在必要时谨慎使用1–2层关键层级。
为什么后代选择器越长越难维护
写成 .header .nav .menu .item .link 这类选择器，表面能精准命中，实际是埋雷：任意中间一层 DOM 结构微调（比如加个 div 包裹、换用 section），整个样式就失效；更麻烦的是，多人协作时没人敢动那层 DOM，怕“不小心 break 了样式”。
根本问题不在“选不中”，而在“绑定太脆弱”。CSS 本就不该靠 DOM 层级猜路径，而该靠语义锚点。
给 div 加 class 不是妥协，是必要设计习惯
每个 div 在页面里都有明确职责——是卡片容器？是操作栏？是折叠面板的 body？那就直接用描述性 class 命名，而不是依赖它“恰好在第 4 层”。
- 避免用
div-1、wrap2这类无意义名，改用card-content、toolbar-actions - 组件内局部作用域优先：用 BEM 风格如
search-form__input，比.search .form input更稳 - 不要怕 class 多：现代浏览器对 class 数量不敏感，但对层级计算成本高（尤其动态插入/删除节点时）
哪些情况真需要后代选择器？怎么写才安全
真要靠层级，只在两个场景下合理：一是第三方库无法改 HTML（比如 React 组件输出固定结构），二是极简原型快速验证。此时必须做减法：
立即学习“前端免费学习笔记（深入）”；
- 只锁 1–2 层关键锚点，比如
.modal .dialog，而非.app .main .content .modal .dialog - 用属性选择器收口：
[data-role="tooltip"] .tooltip-inner比纯 class 层级更可靠 - 警惕
:nth-child类伪类和后代组合——DOM 插入新元素后极易错位，优先用 class 控制状态
检查现有 CSS 是否过度依赖层级
打开 DevTools → Elements 面板，右键某个元素 → “Break on attribute modifications” 或手动删掉某层父元素，看样式是否大面积崩坏。如果一删就乱，说明已深度耦合 DOM 结构。
批量搜索项目里出现频率高的后代选择器：grep -r "\.[a-z]\+ \.[a-z]" src/css/，重点看超过 3 个空格的行。
真正难的不是写对选择器，是让每个 class 名本身就能回答“它是什么”，而不是“它在哪”。一旦命名开始描述位置或顺序，就已经在透支可维护性。
