【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则提供了一个完整的模块化与打包方案。在必定程度上提升了开发的效率，下降了错误率。