实现 css 样式隔离的方法

样式隔离是一种在 Web 开发中常用的技术，用于确保组件或模块之间的样式不会相互影响，从而提高代码的可维护性和可重用性

1. CSS Modules： CSS Modules 是一种将 CSS 文件转换成 JavaScript 模块的技术，其中每个 CSS 类都会被自动命名，从而避免了类名冲突。在使用 CSS Modules 时，每个组件都可以拥有自己的 CSS 文件，并且其中的类名只在当前组件中有效，不会影响其他组件。【每个css文件就相当于一个独立的模块，使用 import 导入】

2. CSS-in-JS： CSS-in-JS 是一种将 CSS 写在 JavaScript 中的技术，其中使用了类似于 CSS Modules 的自动命名机制来确保样式的隔离性。常见的 CSS-in-JS 库包括 styled-components、Emotion 等。【需要使用一些库，react、vue等项目中都能用，但是 vue 中不如 react 中使用的多，参考】

3. Scoped CSS： Scoped CSS 是一种使用特殊的选择器或属性来限定样式的作用范围的技术。例如，在 Vue.js 中，可以使用