更推荐用类选择器+命名空间限制样式作用范围，如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-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• Vue 单文件组件中加 <style scoped>，样式自动加上属性选择器，仅作用于当前组件
• Webpack + CSS Modules 会把类名编译成哈希值（如 _userCard_title_3k9），天然隔离
• 零额外学习成本，无需手动命名，适合中大型项目

慎用 ID 选择器的现实问题

ID 虽优先级高（100），但实际开发中容易埋坑：

立即学习“前端免费学习笔记（深入）”；

• ID 必须唯一，动态渲染多个同类模块时会失效或报错
• 优先级过高反而难覆盖——比如想在某状态下微调，不得不用 !important 或更长的选择器
• 不利于组件化和测试，CSS 工具链（如 PurgeCSS）也难以安全地识别和保留 ID 样式

基本上就这些。局部样式控制的关键不是“压过别人”，而是“别被别人影响”——靠命名约定或构建工具做隔离，比靠优先级硬刚更可持续。