最直接的CSS作用域限定方式是用唯一父级class（如.user-card）作为选择器前缀，推荐BEM命名（.user-card__title），避免全局污染、过度嵌套和all:unset等破坏性重置，优先级控制应依赖单一class而非组合选择器或!important。
用父级 class 或 id 限定 CSS 作用域最直接
没有“模块级 CSS”这种原生机制，所谓“只作用于当前模块”，本质是靠给模块加唯一父级标识（比如 class="user-card"），再让所有样式规则都以它为前缀。这是最兼容、最可控的方式。
常见错误是直接写 .title { color: blue; }，结果全局所有 .title 都被改了。必须写成 .user-card .title 或 .user-card__title 这类带明确上下文的写法。
- 推荐用 BEM 命名（如
.user-card__title），语义清晰且天然避免冲突 - 避免过度嵌套，比如
.user-card .content .header .title—— 维护成本高，优先级也容易失控 - 如果模块有动态加载或复用场景，确保父级 class 是稳定、唯一的，别用
id（因为 id 不该重复）
Vue / React 中的 scoped style 或 CSS Modules 是更自动的方案
框架层提供了更省心的隔离方式，但底层原理仍是“加属性选择器”或“重命名类名”，不是魔法。
Vue 的 <style scoped></style> 会把 .btn 编译成类似 .btn[data-v-f3f2a1]；React 的 CSS Modules 则把 button 编译成 _button_abc123。两者都依赖构建工具（Vite/Webpack）处理。
- scoped style 不处理子组件样式，
<child-component></child-component>内部的.btn不会被父组件的 scoped style 影响 - CSS Modules 中，
import styles from './Button.module.css'后必须用styles.button，不能直接写className="button" - 若需穿透 scoped（比如覆盖第三方组件内部样式），Vue 要用
:deep(.el-input)，React 中需用:global(.ant-btn)
使用 all: unset 或 initial 清除继承干扰不现实
有人想“先清空再重设”，比如在模块根元素上写 all: unset，但这会导致所有默认样式（包括 display、font-size、margin）全丢，后续要手动补全，反而更难维护。
这不是隔离样式，是自毁式重置。真正需要的是“控制范围”，不是“切断继承”。
-
all: unset会清除direction和unicode-bidi，对多语言文本很危险 - 即使只用
all: initial，也会让<p></p>变成 inline 元素，<h1></h1>失去默认字号和 margin - 现代项目里，更应依赖层级限定 + 命名约定，而不是靠重置兜底
注意 CSS 优先级和 !important 的连锁反应
当多个模块都用父级限定时，容易陷入优先级军备竞赛。比如 A 模块写 .card .title，B 模块为了覆盖又写 .profile-card .title，C 模块干脆加 !important —— 这会让调试变得极其困难。
- 优先用单一 class 选择器（
.card-title）而非组合（.card .title），降低优先级 - 禁止在模块样式中滥用
!important，它会破坏可预测性 - 如果真要覆盖第三方样式（如 Ant Design），用
:deep()或:global()明确标记意图，别偷偷叠优先级
父级限定本身很简单，难的是命名一致性、嵌套深度控制和跨团队协作时的约定落地。一个没写清楚的 .modal-content，可能在三个页面里代表完全不同的结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
