最有效、最可持续的解法是直接用类选择器替代复杂结构选择器；应使用语义化类名表达意图而非位置，组合类名处理状态与变体，借鉴BEM思路约束命名，并在工具辅助下克制嵌套。
直接用类选择器替代复杂结构选择器，是最有效、最可持续的解法。结构选择器（比如 .header nav ul li a:hover）看似“语义清晰”，实则脆弱、难维护、易冲突，还常因 DOM 微调而失效。
类名要表达“意图”，不是“位置”
别写 .sidebar .list .item a，改用语义化类名，比如：
-
.nav-link（代替.header nav a） -
.product-card-title（代替.product .info h3） -
.error-message（代替.form .errors p）
这样即使 HTML 结构重排，样式依然稳，也方便其他开发者一眼看懂用途。
组合类名处理状态和变体
一个元素可以有多个类，用组合代替嵌套：
立即学习“前端免费学习笔记（深入）”；
- 原写法：
.btn-primary:hover - 推荐写法：
.btn.btn--primary:hover或.btn.btn--primary.btn--hover
把基础样式（.btn）、主题（.btn--primary）、状态（.btn--hover）拆开，复用性高，调试也直观。
用 BEM 约束命名，避免歧义
BEM（Block-Element-Modifier）不是必须全盘照搬，但它的思路很实用：
-
.card是块（Block） -
.card__title是元素（Element），不依赖父级结构 -
.card--featured是修饰符（Modifier），表示变体
这样写出来的类名自带上下文，不再需要靠祖先选择器“猜位置”。
工具辅助：用 CSS-in-JS 或原子类时更需克制嵌套
即便用 Tailwind 这类原子类库，也别堆砌 md:flex md:items-center md:justify-between 在一个标签里。优先抽成组件级类名（如 .header-nav），再用 @apply 封装。否则模板一多，HTML 就变成样式说明书，可读性反而下降。
结构选择器不是不能用，但在业务组件中，90% 的场景用好类选择器更省心、更可靠。
