阅读 563

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

CSS是一门几十分钟就能入门,但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是,本身不具备真正的模块化能力。

系列文章链接 ↓ ↓

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

关注下面的标签,发现更多相似文章
评论