css 隔离

1. 命名空间

给每个不同模块使用的 css 规划好命名，这样所有的 css 就都不会出现冲突，这种方法虽然很好理解和简单，但是编写起来很繁琐，维护成本会很高，当然，现在也有打包工具很容易就可以实现就是了。

BEM 命名规范

2. css Modules

CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性, 编译时会将 css 类名 加上唯一 hash。

实例：

css module 需要 webpack 配置 css-loader 或者 scss-loader , module 为 true

{
    loader: 'css-loader',
    options: {
        modules: true, // 开启模块化
        localIdentName: '[path][name]-[local]-[hash:base64:5]'
    }
}

3. css-in-js

1. Emotion

Emotion 是一个专为使用 JavaScript 编写 css 样式而设计的库。除了通过源映射、标签和测试实用程序等功能提供出色的开发人员体验之外，它还提供强大且可预测的样式组合。支持字符串和对象样式。

2. styled-components

styled-components 是针对 React 写的一套 css in js 框架, 在你使用 styled-components 进行样式定义的同时，你也就创建了一个 React 组件。css in js

4. Shadow DOM

Shadow DOM 接口可以将一个隐藏的、独立的 DOM 附加到一个元素上

Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样。

使用伪元素控制 shadow-dom 样式

术语：

Shadow host：一个常规 DOM 节点，Shadow DOM 会被附加到这个节点上。

Shadow tree：Shadow DOM 内部的 DOM 树。

Shadow boundary：Shadow DOM 结束的地方，也是常规 DOM 开始的地方。

Shadow root: Shadow tree 的根节点。