实现 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 中，可以使用 <style scoped> 标签来定义组件的样式，从而确保样式只在当前组件中生效。【参考】【实现原理是通过给每个局部作用域的样式类名添加一个唯一的哈希值属性 data-v-xxx，从而实现样式的隔离】

   1. 父组件的哈希值和 slot 的哈希值一样

   2. 子组件的哈希值和父组件不一样

   3. deep 深度选择器的原理是，deep 后的类名，不加哈希值，视为普通的样式

   4. 实现哈希值

      1. 通过【组件文件的路径】和【样式内容】进行哈希化

      2. 哈希值通常是一个较长的十六进制数字或字符串，他是唯一的

   5. 可以使用v-deep 穿透

4. Shadow DOM： Shadow DOM 是一种浏览器原生的技术，用于创建独立的 DOM 子树和样式范围。通过将组件的内容包裹在 Shadow DOM 中，可以确保组件内部的样式不会影响到外部的样式。Shadow DOM的作用：

   1. Shadow DOM（影子 DOM）是 Web 标准的一部分，它为 Web 开发者提供了一种创建独立的 DOM 子树和样式范围的机制

   2. 样式隔离： Shadow DOM 允许开发者在一个独立的 DOM 子树中定义样式，使得样式只对该子树内部生效，不会影响到外部文档或其他 DOM 元素。这样做可以避免全局样式污染和样式冲突的问题，提高了代码的可维护性和可重用性。

   3. 封装组件： 开发者可以使用 Shadow DOM 来封装复杂的组件，将组件的内部结构和样式隐藏起来，只暴露必要的接口和功能给外部使用。这样做可以有效地降低组件的耦合度，提高了组件的可组合性和可复用性。

   4. 模拟原生组件： Shadow DOM 具有类似于原生组件的特性，例如封闭的样式范围、封闭的事件处理机制等，使得开发者可以更轻松地创建自定义的原生组件或控件，提供更好的用户体验和交互效果。

   5. 插件化开发： 使用 Shadow DOM 可以实现插件化开发的方式，将插件的内容和样式封装在独立的 DOM 子树中，然后将其插入到文档中的任意位置，从而实现更灵活和可扩展的应用开发。

5. BEM（Block Element Modifier）： BEM 是一种命名约定，用于给 HTML 元素添加类名，从而限定样式的作用范围。通过遵循 BEM 命名约定，可以确保每个组件或模块的样式都是独立的。官网地址 参考这篇文章。