更推荐用类选择器+命名空间限制样式作用范围，如BEM规范的.user-card、.user-card__title；或用CSS Modules、Vue scoped等现代作用域方案；慎用ID选择器因其唯一性、高优先级难覆盖及不利于组件化。
用 ID 选择器确实能提高局部优先级，但更推荐用类选择器 + 命名空间的方式限制样式作用范围——既保持可维护性，又避免 ID 的全局唯一性和不可复用问题。
用带命名前缀的类名隔离样式
给模块根元素加一个语义化类名（如 user-card），所有内部样式都以此为上下文：
-
写法示例：
.user-card { }<br>.user-card__title { }<br>.user-card--compact .user-card__content { } - 符合 BEM 规范，结构清晰，多人协作不易冲突
- 支持复用：同一页面可出现多个
<div class="user-card">
利用 CSS 作用域（现代方案）
如果项目支持 CSS Modules 或 Vue/React 的 scoped style：
- Vue 单文件组件中加
<style scoped>，样式自动加上属性选择器，仅作用于当前组件 - Webpack + CSS Modules 会把类名编译成哈希值（如
_userCard_title_3k9），天然隔离 - 零额外学习成本，无需手动命名，适合中大型项目
慎用 ID 选择器的现实问题
ID 虽优先级高（100），但实际开发中容易埋坑：
立即学习“前端免费学习笔记（深入）”；
- ID 必须唯一，动态渲染多个同类模块时会失效或报错
- 优先级过高反而难覆盖——比如想在某状态下微调，不得不用
!important或更长的选择器 - 不利于组件化和测试，CSS 工具链（如 PurgeCSS）也难以安全地识别和保留 ID 样式
基本上就这些。局部样式控制的关键不是“压过别人”，而是“别被别人影响”——靠命名约定或构建工具做隔离，比靠优先级硬刚更可持续。
