CSS选择器链过长易引发优先级失控、结构变动导致样式失效、协作修改风险高三大问题，应以语义化类名替代层级依赖，推行模块化实践并谨慎保留必要短链。
为什么 CSS 选择器链越长越容易出问题
深度嵌套的选择器（比如 .header .nav .menu .item a:hover）看似精准，实则埋下三类隐患：一是优先级失控，后续样式覆盖要靠更长链或 !important；二是 HTML 结构微调就导致样式失效；三是团队协作时没人敢动中间某一层，怕牵一发而动全身。
这类链式选择器常出现在「为了复用一套 CSS 而强行适配多处结构」的场景里，本质是把样式逻辑耦合进了 DOM 层级关系。
用有意义的类名替代层级依赖
放弃靠父元素“定位”子元素，转而给关键节点赋予语义化、功能性的类名：
- 不要用：
.sidebar .content .title - 改用：
.sidebar-title或.content-title
这样做的前提是接受一个事实：类名不是对 HTML 结构的描述，而是对 UI 元素角色的声明。
