CSS Modules 方案

在讲CSS Modules以前，先想一想什么是CSS Module？

在我眼中CSS Module是对css进行模块化的管理，更加深刻的解释就是用来管理css样式的导入与导出。灵活按需导入以便复用代码，导出的时候要合理的分割域的界限。

CSS Module面对的问题

模块化实际过程当中遇到的问题有以下几点:

1. 样式污染
2. 命名混乱
3. 没法共享变量,具体来讲，在主题样式文件库中设置了默认样式，而后想要在js中去获取，在原先的css体系中很难作到，你要经过dom查询去获取对应的样式。
4. 代码压缩不完全，好比说，你用了sass、less之类的内容，他们会在被包裹的类名上再加上包裹他的类名，没法作到很好地压缩

进程后移，CSS Module的发展中，出现了sass、less等一系列解决css编程能力弱的问题和样式污染的问题，可是他们并无很好地解决模块化其余的问题

在以前，还出现过一种方案叫 css in js，这种写法至关于彻底抛弃了css，在js中经过hash映射来写css，这个写法的好处和坏处都很明显。

而后就是咱们的CSS Modules, CSS Module的问题他都能解决的比较好

CSS Modules

CSS Modules的官方文档以下:github.com/css-modules…

简单的例子来描述写它的使用方式，

首先在webpack中进行对应的设置，以后进行对应的引用

/*webpack.js*/
css?modules&localIdentName=[name]__[local]-[hash:base64:5]
/*Button.css*/
.normal{}
.disabled{}
/*Button.js*/
import styles from './Button.css'
render(){
    reutrn(
        <button class=${styles.normal}></button>
    )
}
最终生成的html以下
<button class="button-normal-abc5436"></button>
复制代码

后面的abc3546是按照localIdentName自动生成的class名称，按照给定算法生成的序列码，这样处理以后，大大下降了项目中样式覆盖的概率 。同时生成更短的class名能够提升css的压缩效率

默认状况下，样式是局部内容，若是要切换成全局的样式能够用:global进行包裹

样式复用在CSS Modules中也是能够作到的，相对于less sass来讲麻烦一点，须要用composes来组合样式，固然如今CSS Modules也是能够结合less的

.base{}
.normal{
    composes:base
}
复制代码

以上CSS Modules的命名规则是源于BEM的。BEM是一种css命名模板，具体内容以下:

B:block,对应模块名，如dialog

E:element 对应模块中的节点，如button

M:modifier 对应节点的状态，disabled

最终class名 dialog__button--disabled 在不少大型项目中均可以看到这样的命名写法

CSS Modules实现变量共享

config.css
css{
    $primary-color:#ffffff;
}
app.js
import style from 'config.css'

console.log(style.primaryColor)
复制代码

解决频繁书写styles的反作用

不过CSS Modules在实际开发中会带来书写的反作用，每个class前面都须要加一个styles，这样增长了书写的负担，若是不想频繁的书写，可使用react-css-modules库，经过高阶组件的形式避免重复输入css 核心代码以下:

import React,{Component} from 'react'
import styles from './config.css'
import CSSModules from 'react-css-modules'

class Dialog extends Component{
    render(){
        return(
            <div styleName={root}></div>
        )
    }
}

export default CSSModules(Dialog,styles)

复制代码

这样书写以后的好处有以下几个:

1. 省去了styles的重复书写
2. 若是想要写全局样式，直接用className书写就能够
3. styleName关联一个undefined的CSS Modules时，咱们能够获得一个警告
4. 保证css的样式来源的单一明了