最可靠的方式是用唯一父级class限定选择器范围。裸类名（如.title）无上下文易冲突，标签选择器（如h3）全局生效更危险；bem命名（如.user-card__title）语义清晰且防冲突；css modules/scoped需严格遵循文件命名与使用规范，否则失效。
直接用父级 class 限定选择器范围，是最可靠、兼容性最好、也最不需要构建工具支持的方式。
为什么不能直接写 .title 或 h3
裸类名（如 .title）没有上下文，一旦多个模块都用了这个类名，样式就会互相覆盖；标签选择器（如 h3）更危险——它不看你在哪个文件里写，所有页面里的 h3 全部中招。常见现象包括：改了用户卡片的 img 圆角，结果头像、图标、代码块里的图片全变形；给某个表单加了 button { padding: 8px }，Ant Design 的按钮边框和间距立刻错乱。
这些不是“可能出问题”，而是浏览器必然行为——CSS 没有文件作用域概念，只有匹配规则和优先级。
用唯一父级 class + BEM 命名锁定作用域
给模块根元素加一个稳定、不重复的 class（比如 user-card），所有内部样式都以它为前缀书写：
-
.user-card .title—— 后代选择器，简单直接，但注意别嵌套太深（如.user-card .content .header .title） -
.user-card__title—— 推荐 BEM 风格，语义清晰，天然避免命名冲突，且无需依赖层级关系 - 父级 class 必须是 class，别用
id（id 不该复用，且 React/Vue 中动态渲染容易重复） - 确保父级 class 在组件挂载时就存在，不要靠 JS 动态添加——否则样式可能短暂失效或漏匹配
CSS Modules 或 scoped 不是魔法，只是自动帮你加前缀
Vue 的 <style scoped></style> 和 React 的 Button.module.css 底层原理一致：把 .btn 编译成类似 .btn[data-v-f3f2a1] 或 Button_btn__abc123。但它们有硬性前提：
- 文件名必须含
.module.css（Vite 默认只认这个后缀），Button.css导入永远全局 - 第三方组件内部的 DOM（如 Element 的
.el-cascader-menu）不会被父组件的scoped影响，得用:deep(.el-cascader-menu)或popperClass属性透传 - CSS Modules 对
div、img这类标签选择器完全放行——你写了div { margin: 0 }，照样污染全局 -
import styles from './Button.module.css'后，必须用className={styles.button}，写className="button"就等于没用模块化
真要穿透或兜底时，别靠 !important 打补丁
当需要覆盖第三方组件样式（比如改 el-date-picker 的弹层颜色），优先顺序应该是：
- 查组件文档是否提供
popperClass、dropdown-class等透传 class 的 prop - 用属性选择器限定范围：
[data-page="user-profile"] .el-date-editor，比裸写.el-date-editor安全得多 - Vue 中用
:deep(.el-input__inner)，React 中用:global(.ant-btn)，但必须加前缀限定，如:global([data-scope="user-form"] .ant-btn) - 避免在模块样式顶部写
:global(div) { ... }——这会让整个文件失去局部性，变成“局部文件+全局规则”混合体
真正难处理的从来不是怎么写对一行样式，而是团队里有人觉得“就改个 p 行高，用标签最省事”，然后全站段落间距突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
