减少CSS选择器嵌套的核心是用语义化类名（如BEM）替代深度父子关系，提取复用工具类，借助自定义属性、:where()/:is()、scoped样式或CSS-in-JS实现精准作用域控制。
减少 CSS 选择器嵌套层级，核心是用更精准、语义明确的类名替代深度父子关系，避免写成 .header .nav .menu .item a:hover 这类脆弱又难追踪的样式。
用 BEM 命名规范替代嵌套
BEM（Block-Element-Modifier）通过命名约定表达结构关系，让样式不依赖 DOM 层级。比如把 .card .card__title .card__title--large 写成 .card__title--large，直接作用于元素本身，删掉父容器类也不影响生效。
- Block 是独立模块（如
.modal） - Element 是其子部分（如
.modal__header），必须和 Block 同时出现，但不依赖中间层级 - Modifier 表示状态变体（如
.button--primary），直接加在元素上
提取复用类，避免“上下文强绑定”
当某个样式只在特定父容器下才生效（如 .article .content p），说明它其实承担了“内容排版”职责，应抽成独立工具类或语义类，比如 .text-body 或 .prose p。这样改布局时，只需调整 HTML 类，不用翻找 CSS 文件里哪几行被嵌套锁死了。
- 把视觉效果（颜色、间距、字体）尽量交给原子类或组件类控制
- 避免用
#main aside ul li a这种靠结构猜意图的选择器 - 用
[data-theme="dark"] .button替代.dark-theme .container .button，更稳定也更易测试
用 CSS 自定义属性 + :where() / :is() 控制作用范围
现代 CSS 提供了更轻量的作用域控制方式。例如用 :where(.card, .dialog) .title 可以匹配多个上下文下的 title，且不会增加优先级；配合自定义属性，把主题色、圆角等提取到根节点，子组件直接继承，无需层层覆盖。
立即学习“前端免费学习笔记（深入）”；
-
:where()内的选择器不参与优先级计算，适合写通用重置或基础样式 - 用
--card-padding: 1rem定义变量，.card { padding: var(--card-padding); }直接使用 - 组件内需要差异化时，就近设置变量：
.card--compact { --card-padding: 0.5rem; }
必要时用 scoped 或 CSS-in-JS 划清边界
在组件化项目中（如 Vue、React），启用 或使用 Linaria、Emotion 等方案，让样式天然绑定到组件，从机制上杜绝跨组件误影响。这不是逃避 CSS，而是把“作用域”交还给模块系统，让开发者专注描述“这个按钮长什么样”，而不是“怎么确保它不被 article 里的 p 标签样式搞坏”。
- scoped 样式会自动添加唯一属性选择器（如
.button[data-v-abc123]） - CSS-in-JS 支持动态值、条件样式、主题切换，逻辑与样式共存一处
- 关键不是禁用普通 CSS，而是明确哪些该全局（基础重置、工具类），哪些该局部（业务组件）
