根本解法是用语义清晰的类名替代结构依赖，如将 .card .content p 改为 .card-text；优先采用BEM命名、分离结构与样式类、限制嵌套≤3层，并借助CSS Modules实现作用域隔离。
直接用多层嵌套选择器（比如 .header .nav .menu .item a:hover）会让样式耦合 HTML 结构，一旦改结构或复用组件，样式就容易失效或误触。根本解法不是“少写几层”，而是用语义清晰、作用明确的类名来承接样式责任。
用有意义的类名替代结构依赖
避免靠父级元素“猜”当前元素身份，给关键元素直接加描述性类名。比如把：
<div class="card">
<div class="content">
<p>正文</p>
</div>
</div>
中 p 的样式从 .card .content p 改为 .card-text。这样即使将来 p 搬到别处，只要加了 class="card-text" 就能保持样式一致。
立即学习“前端免费学习笔记（深入）”；
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
- 类名聚焦“它是什么”，而不是“它在哪”
- 优先用 BEM 风格（如
card__title、card--featured），明确模块归属和状态 - 避免纯功能类名（如
.red、.mt-16），除非在原子 CSS 或设计系统中统一管控
拆分关注点：结构类 + 样式类
HTML 中可同时使用多个类，把“结构角色”和“视觉表现”分开声明。例如：
<button class="btn btn--primary btn--large">提交</button>
其中 btn 定义基础按钮行为（重置默认、内边距、光标等），btn--primary 控制颜色和边框，btn--large 控制尺寸。修改某一方面样式时，只动对应类，不牵连结构。
- 基础类（如
btn）负责通用行为和最小样式 - 修饰类（如
btn--primary）只覆盖必要属性，不重复定义基础类已有的规则 - 组合使用灵活，也便于通过 JS 动态增删状态类（如
btn--loading）
限制嵌套深度，设定团队规范
不是禁止嵌套，而是设上限。多数项目建议不超过 3 层（如 .modal .modal-header h2）。超过即预警——很可能该提取成独立组件或加新类名。
- 用工具检测（如 stylelint 的
max-nesting-depth规则）自动拦截过深选择器 - 审查 PR 时重点看新增选择器是否依赖深层 DOM 路径
- 对遗留深嵌套代码，优先“加类名再解耦”，而非强行重写 HTML
用 CSS Modules 或 Scoped CSS 隔离局部作用域
在支持模块化 CSS 的环境（Vue、React + CSS Modules、Svelte 等）中，让类名天然带哈希后缀，彻底避免全局污染和意外覆盖。此时即使写 .content p，实际也只作用于当前组件内，维护压力大幅降低。
- 类名可更简洁（如
title、list-item），无需强加前缀 - 组件级样式变更不影响其他模块，重构更安心
- 配合编译工具，还能自动压缩冗余类名、提取共用样式
