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的樣式來源的單一明瞭