微前端的样式隔离选择--CSS Modules
前记
因为在实习公司发生了一件很"诡异"的事情：我的滑动条凭空消失了！！！很明显，这是因为被其他的样式所污染了，因为在公司的项目是用的EMP微前端框架，这个时候我开始对微前端框架的样式隔离方案产生了兴趣，例如qiankun有着自己的沙箱设计，但是我调研了很多使用这个框架的项目还是使用了CSS Modules，还有ESM，不提供css的样式隔离，在使用者的自定义中很多也会使用到这篇文章的主角，而在我实习公司的emp中使用的也是使用的CSS Modules.
说明： 并不是单单靠 CSS Modules 就能彻底实现样式隔离，个人感觉是一种如虎添翼的感觉，因为按需加载一直是个很不错的手段，会造成样式污染说到底是 F12 后看到的那些body被污染了，而把它直接卸载，再渲染别的也是可以实现的，这也是qiankun之前的沙箱实现方案.
CSS Modules 是什么
- 权威的解释是：
CSS Modules works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you've used in the files to the globally-safe output CSS.
来自于这里。
- 我的理解是：
CSS Modules 的原理是通过在 构建过程 中，为每个CSS模块生成唯一的标识符，并将样式规则和类名映射到这个标识符上。这样在使用样式的地方，可以通过导入样式模块并使用到处的样式对象来引用样式类名。过程分为：解析、转换、映射、导出、应用。
通过何种方式，CSS Modules实现了样式的模块化和局部作用域限定。每个样式类名都会被映射为一个唯一的标识符，在使用样式时，通过导入样式模块并使用导出的样式对象，可以引用样式类名。在构建工具会将引用的样式类名替代为对应的唯一标识符，从而实现样式的局部作用域限定和防止样式冲突。
没错，关键点在于：构建工具(普遍？)
如何实现CSS Modules
如何实现CSS Modules 这取决于我们所使用的构建工具，这里以webpack为例：
- 安装相关依赖： 首先，需要安装Webpack及其相应的loader和插件。例如，可以安装
css-loader和style-loader用于处理CSS文件，以及webpack和webpack-cli用于打包构建。 - 配置Webpack： 在Webpack的配置文件中，需要添加相应的loader来处理CSS文件，并启用CSS Modules。例如，可以在module.rules中添加以下配置：
js
module.exports = {
// ...
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]',
},
},
},
],
},
],
},
// ...
};这里的css-loader会处理CSS文件，并启用CSS Modules。style-loader用于将CSS样式注入到页面中。
- 编写样式文件： 在CSS文件中，可以使用
:local关键字将样式类名导出。例如：
css
.container {
background-color: #f1f1f1;
padding: 10px;
}
.title {
color: blue;
}- 导入样式对象： 在需要使用样式的组件或模块中，可以导入样式文件，并使用导出的样式对象来引用样式类名。例如：
js
import styles from './styles.module.css';
const element = document.createElement('div');
element.className = styles.container;这里的styles对象是从样式文件中导入的样式对象，其中包含了以导出的样式类名为属性的对象。
通过以上步骤，webpack会在构建过程中解析CSS文件，并将样式规则和类名处理为唯一的标识符。在使用样式的地方，可以通过导入样式文件并导出的样式对象来引用样式类名。webpack会在打包过程中将引用的样式类名替换为对应的唯一标识符，从而实现CSS Modules的功能.
番外
其实在实现CSS Modules不只有构建工具：
- 浏览器： 插件css-modulesify使您的 Browserify 能够构建
requireCSS 文件并将其编译为 CSS 模块. - JSPM: 实验性 JSPM 加载器jspm-loader-css-modules为 SystemJS 和 JSPM 添加了 CSS 模块支持.
- NodeJS: css -modules-require-hook 的工作方式与 Browserify 插件类似，但修补 NodeJS
require以将 CSS 文件解释为 CSS 模块.
结语
今天努力过了，该去玩了