CSS ModulesES6之前虽然语言层面上没有模块化的实现，但通过各种方法能够做到模块化的效果，也就是能够实现你和我

CSS 如何实现模块化

什么是CSS Modules

ES6之前虽然语言层面上没有模块化的实现，但通过各种方法能够做到模块化的效果，也就是能够实现你和我写的代码可以相互不干扰，不会冲突。那在CSS中又是怎么实现两个CSS文件能不相互影响的呢？这就是CSS Modules要解决的问题。先看看官方给的定义：

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

实际上，CSS Modules 不是一个官方的标准，也不是浏览器的实现。而是你按照的 Modules 的写法(语法)去写CSS,然后通过构建工具转换，就能够实CCSS Modules。

语法：：global(.className)

index.css

:global(.red) {
    color: red;
}

这样，red 这个类就是一个全局的样式，和我们正常写的CSS是一样的。

语法： :loacl(.red)

index.css

：local(.red) {
    color: red;
}

或者：
.red {
    color: red;
}

这样，red这个类就是一个具有局部作用的样式，它不会影响到其他的CSS。

语法： composes: className 注意：这个语法只适用于局部作用域的Class index.css

.red {
    color: red;
}
.ele1 {
    composes: red;  // 继承了 red Class 的样式
    font-size: 24px;
}

index1.css

.red {
    color: red;
}

index2.css

.ele {
    composes: red from './index1.css'  // 继承了index1.css 里的red Class
}

上面的写法不是CSS的语法，浏览器无法识别上面的写法，那如何让浏览器识别呢，这就需要用一个工具，将它转换成浏览器认识的CSS，这就CSS Modules Complier，例如webpack 的css-loader就实现了这个功能。

下面是一个示意图：

通过CSS Modules 的写法写CSS，然后经过CSS Modules Complier 将CSS进行处理，最后会将这个CSS 文件以一个JS对象的形式输出。

要想在CSS里实现局部作用域，这就要保证你的Class名是独一无二的，这就是核心，CSS Modules Complier就是通过将局部作用域的Class Name 转换成一个独一无二的名字实现CSS Module 的。