直接上总结
| 特性 | Scoped Styles | CSS Modules |
|---|---|---|
| 样式作用域 | 采用 data-v-xxxx 属性限制样式作用域 | 通过生成独特类名来防止样式冲突 |
| 生成的样式 | .example[data-v-abcdef] | .example__abcdef |
| 适用框架 | 主要用于 Vue（划重点） | 主要用于 React，Vue 3的JSX/TSX 写法（划重点） |
| 适用场景 | 快速实现样式隔离，简单的组件 | 大型项目、组件库，样式模块化管理 |
什么时候用scoped
什么时候不用Scoped 而要用 CSS Modules
直接上原因
- Scoped Styles：若在 Vue 项目中，需要快速且简单地实现样式的局部性，直接使用 scoped styles 是最方便的。
- CSS Modules：
而 React的JSX 和 TSX 组件并没有内置类似的 scoped 机制，因此我们需要使用css moudules来实现样式的局部性。
CSS Modules 原理：
CSS Modules 的工作原理则是通过给每个类生成一个独特的名称来避免样式冲突。构建工具（如 Webpack）在处理模块化 CSS 文件时，会为每个类名前添加一个随机字符串或哈希值。这样即使不同组件中使用了同样的类名，它们在最终的 CSS 中也会被编译成不同的名称。
编译后示例： 假设我们有以下的 CSS Module 文件：
/* styles.module.css */
.example {
color: blue;
}
在 JS 组件中使用时：
import React from 'react';
import styles from './styles.module.css';
const Example = () => {
return <div className={styles.example}>Hello World</div>;
};
export default Example;
在编译后，生成的 CSS 可能会是：
.example__abcdef {
color: blue;
}
并且生成的 HTML 可能会变成：
<div class="example__abcdef">Hello World</div>
在这个案例中，.example 类在最终的 CSS 中被转换成了 .example__abcdef，以确保类名的唯一性，避免不同组件之间的样式冲突。
