使用唯一类名或BEM命名可有效限制CSS作用域，Vue的scoped和React的CSS Modules通过自动加前缀实现样式隔离，避免全局污染。
想让CSS样式只作用于某个组件内部，关键是通过选择器确保样式的作用域隔离，避免影响全局或其他组件。使用id或class确实是常见方式，但具体怎么用才可靠？下面讲几种实用做法。
用唯一的类名作为命名空间
给组件外层容器加一个独特class，所有内部样式都基于这个class写选择器，能有效限制作用范围。
比如组件叫UserCard：
HTML结构：
<div class="user-card"> <h3 class="title">用户名</h3> <p class="info">用户信息</p> </div>
CSS写法：
立即学习“前端免费学习笔记（深入）”；
.user-card .title {
font-size: 16px;
color: #333;
}
.user-card .info {
color: #666;
}
这样即使其他地方也有.title或.info，也不会被误命中。
使用BEM命名规范增强可维护性
BEM（Block Element Modifier）是一种推荐的命名方式，能从命名上杜绝冲突。
继续上面的例子：.user-card__title { }
.user-card__info { }
.user-card--compact { }
所有样式都以user-card为前缀，天然限定在组件内，无需嵌套选择器，也更利于维护。
利用ID选择器需谨慎
ID虽然唯一，理论上可以用来锁定样式，但不推荐作为主要手段。
- ID权重高，容易导致样式难覆盖
- HTML中ID应保持唯一，不适合复用组件
- React/Vue等框架中动态渲染多个同类型组件时，无法重复使用相同ID
除非是页面级唯一区块（如#header），否则建议优先用class。
现代框架中的作用域方案更高效
如果在用Vue或React这类框架，可以直接使用scoped CSS或css modules。
例如 Vue 中：<style scoped>
.title {
color: red;
}
</style>
编译后会自动加data属性选择器，实现样式隔离，无需手动加前缀。
React中可用CSS Modules：
import styles from './UserCard.module.css'; // 使用 styles.title，类名自动哈希化，天然隔离
基本上就这些。用class前缀最通用，BEM更规范，框架自带方案最省心。核心思路就是：别让样式“逃”出组件。
