【CSS模塊化之路2】webpack中的Local Scope

CSS是一門幾十分鐘就能入門，可是卻須要很長的時間才能掌握好的語言。它有着它自身的一些複雜性與侷限性。其中很是重要的一點就是，自己不具有真正的模塊化能力。

系列文章連接 ↓ ↓

• 【CSS模塊化之路1】使用BEM與命名空間來規範CSS
• 【CSS模塊化之路2】webpack中的Local Scope
• 【CSS模塊化之路3】 使用💅styled-components來進行react開發

1. 面臨的問題

你可能會說，CSS有@import功能。然而，咱們都知道，這裏的@import僅僅是表示引入相應的CSS文件，但其模塊化核心問題並未解決——CSS文件中的任何一個選擇器都會做用在整個文檔範圍裏。

所以，其實咱們面臨的最大問題就是——全部的選擇器都是在一個全局做用域內的。一旦引入一個新的CSS文件，就有着與預期不符的樣式表現的風險（由於一些不可預測的選擇器）。

而現在的前端項目規模愈來愈大，已經不是過去隨便幾個css、js文件就能夠搞定的時代。與此同時的，對於一個大型的應用，前端開發團隊每每也再也不是一兩我的。隨着項目與團隊規模的擴大，甚至是項目過程當中人員的變更，如何更好進行代碼開發的管理已經成爲了一個重要問題。

回想一下，有多少次：

• 咱們討論着如何對class進行有效的命名，以免協做開發時的衝突；
• 咱們面對一段別人寫的css、html代碼，想要去修改，而後瘋狂查找、猜想每一個類都是什麼做用，哪些是能夠去掉的，哪些是能夠修改的——到最後咱們選擇從新添加一個新的class；
• 咱們準備重構代碼時，重構也就成了重寫
• ……

用CSS實現一些樣式每每並非最困難的所在，難的是使用一套合理的CSS架構來支持團隊的合做與後續的維護。

What we want is to be able to write code that is as transparent and self-documenting as possible.

本系列文章會介紹一些業界在探索CSS模塊化進程中提出的方案。再上一篇文章裏咱們介紹了如何使用BEM和命名空間來規範與架構咱們的CSS。這一篇文章主要介紹了，如何在webpack中使用一種相似「CSS模塊化」的解決方案———Local Scope，來規避一些開發中的問題。

2. 什麼是Local Scope

一般來講，CSS中的全部選擇器能夠算是「全局做用域」。而「Local Scope」顧名思義，使CSS具備相似於局部做用域的能力，同時搭配相似JavaScript中模塊化的寫法，到達CSS模塊化的效果。

這麼說可能有些抽象，咱們能夠來看一個例子。

在webpack中引入css每每是這樣的：

// index.css
.title {
    font-size: 30px;
    color: #333;
}

// index.js
import './index.css';

funciont createTitle(str) {
    var title = document.createElement('h1');
    title.appendChild(document.createTextNode(str));
    title.setAttribute('class', 'title');
    document.body.appendChild(title);
}

createTitle('Hi!');
複製代碼

因爲，webpack中將js、css、png等這些資源都視爲模塊，因此能夠經過import導入。可是，實際上，對於導入的全部css，其「地位」都是平等的，都是在全局有效的。例如：

// index.css
.title {
    font-size: 30px;
    color: #333;
}

// other.css
.title {
    font-size: 15px;
    color: #999;
}

// index.js
import './index.css';
import './other.css';

funciont createTitle(str) {
    var title = document.createElement('h1');
    title.appendChild(document.createTextNode(str));
    title.setAttribute('class', 'title');
    document.body.appendChild(title);
}

createTitle('Hi!');
複製代碼

當咱們引入了新的CSS文件other.css後，其中的.title和index.css中的.title有着一樣的「做用域」——全局。

回想一下在JavaScript中：

// a.js
var a = 1;

// other.js
var a = 2;

// index.html
<script src="./a.js"></script>
<script src="./other.js"></script>
<script>
    console.log(a); // 2
</script>
複製代碼

若是某個html頁面經過script標籤引入這兩js文件，那麼a的值一定會有衝突，其中一個會被覆蓋。若是使用模塊化的方式，能夠變成：

// a.js
export var a = 1;

// other.js
export var a = 2;

// app.js
import {a} from './a';
import {a as other} from './other';

console.log(a); // 1
console.log(a); // 2
複製代碼

而所謂的Local Scope就是webpack中在CSS上針對這種問題的一個解決方案。相似JavaScript的模塊化，經過對CSS文件進行模塊引用與導出的方式，可以在開發時，更有效得控制各個class的做用範圍。

3. 使用方法

首先，須要在webpack中對css-loader進行必定的配置。

// loader: 'css-loader',
// options: {
// modules: true,
// localIdentName: '[local]__[name]--[hash:base64:5]'
// }
const config = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[local]__[name]--[hash:base64:5]'
                }
            }]
        }]
    }
};
複製代碼

而後，咱們仍是使用前一節例子中的那個場景：

// index.css
:local .title {
    font-size: 30px;
    color: #333;
}

// other.css
:local .title {
    font-size: 15px;
    color: #999;
}

// index.js
import styles from './index.css';
import others from './other.css';

funciont createTitle(str) {
    var title = document.createElement('h1');
    title.appendChild(document.createTextNode(str));
    // styles.title  font-size: 30px;color: #333;
    title.setAttribute('class', styles.title);
    document.body.appendChild(title);
}

createTitle('Hi!');
複製代碼

其中須要注意的有三個地方：

• 第一個是在CSS文件中的，類選擇器前多了:local這個語法。經過添加:local就能夠指示webpack，這不是一個「全局」的選擇器（固然，實際上也是全局的，後面會簡單解釋）。
• 第二個地方是在js文件中，將import 'index.css'變爲了import styles from './index.css'。是否是看着很熟悉，沒錯，和JavaScript中的模塊化方案用法同樣。
• 第三個地方，在使用到該class的地方，由原來的title.setAttribute('class', ‘title’)變爲了title.setAttribute('class', styles.title)。這樣咱們能夠選擇在一部分dom元素上使用styles.title，即index.css的樣式；在另外一部分dom元素上使用other.css的樣式。

這樣就解決了咱們以前提到的問題。

固然，有些時候，咱們但願類選擇器中的某一部分仍然是「全局」的，那麼咱們能夠這麼寫：

:local .title :global(.sub-title) { color: #666; }
複製代碼

4. 關於Local Scope

雖然咱們上面說了這麼屢次的「模塊化」、「做用域」、「全局」，然而，實際上，對於CSS這門語言來講，它在本身自己的邏輯上是不具有這些特色的。而webpack中Local Scope的相關方案，其實也並非（CSS自己邏輯支持的）真正意義上所謂的模塊化。因此不少地方我都打上了引號。

若是對着打包後的頁面，打開chrome控制檯，會發現，咱們的html是這個樣子的

<body>
    <h1 class="title__index--330EV">Hi!</h1>
</body>
複製代碼

h1標籤的class並非咱們在CSS中所寫的title，而是一串奇怪的字符串title__index--330EV。

當使用webpack進行打包時，因爲檢查到:local這個語法，所以會爲.title這個class生成一個新的class名稱，而咱們在js文件中所使用的styles.title對應的就是這個新的classname。

因此能夠理解，其實當前的CSS語法邏輯中中並無實際意義上所謂的local scope，可是，經過webpack打包時的操做，咱們會爲每一個:local的class生成一個惟一的名稱，而咱們使用樣式實際是指向了這個classname。這就實現了兩個CSS文件中，相同名稱的class在使用時就不會有衝突了，至關於避開了「全局做用域」。

若是打開打包後的bundle.js,咱們能夠發現一段頗有趣的代碼

// ……其他省略
// exports
exports.locals = {
    "title": "title__index--330EV"
};

// ……其他省略
// exports
exports.locals = {
    "title": "title__other--3vRzX"
};
複製代碼

這是在兩個不一樣的模塊內的部分。上面一個就是導出的index.css中對應的classname，下面一個就是other.css的。經過styles.title就能夠引用到title__index--330EV這個實際值。

最後，再來講一下title__index--330EV這個值得由來。在上一節的一開始，咱們對webpack進行了配置，其中有一行

localIdentName: '[local]__[name]--[hash:base64:5]'
複製代碼

其實就是指示了惟一標識的命名方式：local是class的名稱，name是文件的名稱，而最後加上hash值。固然，你徹底可使用其餘你喜歡的方式。默認是使用[hash:base64]。

5. 寫在最後

其實webpack中的CSS模塊化方案Local Scope，粗淺的來講也是經過生成惟一的classname來避免衝突，控制做用範圍。只是和BEM不一樣，BEM是一個建議標準，更多的仍是人爲的操控，而webpack中的Local Scope則提供了一個完整的模塊化與打包方案。在必定程度上提升了開發的效率，下降了錯誤率。