简单易懂的CSSModules

不要误会&＃xff0c;CSS Modules可不是在说“css模块化”这个好像在某些地方见过的词&＃xff0c;它其实是特指一种近期才出现的技术手段。

什么技术手段呢&＃xff1f;请待后文说明。

层叠样式表

我们知道&＃xff0c;css的全名叫做层叠样式表&＃xff0c;这个“层叠”到底是什么意思呢&＃xff1f;

有一种解释是&＃xff0c;如果你先写了一条样式规则&＃xff08;选手1&＃xff09;&＃xff1a;

.title {color: silver;
}

然后又在后边写了一条类似的&＃xff08;选手2&＃xff09;&＃xff1a;

.title {color: gold;
}

因为名字相同&＃xff0c;选手2就会和选手1打起来&＃xff08;让你丫冒充我&＃xff01;&＃xff09;。结果是选手2获胜&＃xff0c;class名为title的元素&＃xff0c;最终的color值为gold。

css里就像这样&＃xff0c;随时可能一言不和就发生战争&＃xff0c;结果输掉的一方就会被胜利的一方所覆盖。“层叠”一词可以说形象地描述了这个过程。

那么&＃xff0c;为什么会有这样的层叠&＃xff08;zhàn zhēng &＃xff09;呢&＃xff1f;

css的作用域问题

在Javascript里&＃xff0c;可以做到这样的搭配&＃xff1a;

var title &＃61; "silver";(function(){var title &＃61; "gold";console.log(title); // gold
}());console.log(title); // silver

利用Javascript的函数作用域&＃xff0c;两位同样名为title的选手可以友好相处。

但回到css里的样式规则&＃xff0c;情况就完全不是这么回事了。

css不是程序语言&＃xff0c;但如果说要给它加一个作用域的概念的话&＃xff0c;那就是&＃xff1a;只有全局作用域。

无论分拆为多少个css文件&＃xff0c;无论用怎样的方式引入&＃xff0c;所有的样式规则都位于同一作用域&＃xff0c;只要选择符近似&＃xff0c;就有发生覆盖的可能。

减少相互影响的策略

为减少相互影响&＃xff0c;避免预料之外的样式覆盖&＃xff0c;我们一直以来想过很多办法。

比如你接手一个别人留下来的旧项目&＃xff0c;接下来要新增一个标题元素的时候&＃xff0c;你会有意识地不去使用.title这样模糊的class名&＃xff0c;因为它太容易重名了。最终&＃xff0c;你用的名称可能是&＃xff1a;

.module-sp-title {color: deepskyblue;
}

即使你决定要用.title这个名字&＃xff0c;你也会加上包含选择符作为限定&＃xff1a;

.module-1 .title { font-size: 18px;
}
/* ... */
.module-2 .title {font-size: 14px;
}

其中.module-1和.module-2的名字应该是唯一的&＃xff0c;这样的代码在组件化&＃xff08;模块化&＃xff09;的开发风格里很常见。

此外&＃xff0c;一些有名的css理论&＃xff0c;如SMACSS&＃xff0c;会建议你为所有布局样式使用l-或layout-的前缀&＃xff0c;以示区分。

类似的做法还有很多&＃xff0c;但归结起来&＃xff0c;都是在尝试提供一种合理的命名约定。而合理的命名约定&＃xff0c;的确是组织css代码的有效策略。

现在&＃xff0c;我们有了新的可用策略&＃xff0c;CSS Modules就是其中之一。

技术流的模块化

CSS Modules是一种技术流的组织css代码的策略&＃xff0c;它将为css提供默认的局部作用域。

CSS Modules是如何做到的呢&＃xff1f;来看一个CSS Modules的简单例子吧。

有这样的一个html元素&＃xff1a;

a title for CSS Modules

按照普通css的写法&＃xff0c;我们可以这样为它添加样式&＃xff1a;

.title {background-color: snow;
}

现在我们改用CSS Modules。首先&＃xff0c;css保持不变。然后&＃xff0c;修改html的写法。不再这样直接写html&＃xff0c;而是改为在Javascript文件里动态添加&＃xff0c;这样做&＃xff08;css文件名为main.css&＃xff09;&＃xff1a;

var styles &＃61; require("./main.css");var el &＃61; document.getElementById("example_title");
el.outerHTML &＃61; &＃39;

a title for CSS Modules

咦&＃xff0c;require了一个css文件&＃xff1f;对的&＃xff0c;所以要用到webpack。编译后&＃xff0c;html和css会变成这样&＃xff1a;

看到这样不太美观的class名你大概就明白了&＃xff0c;CSS Modules无法改变css全局作用域的本性&＃xff0c;它是依靠动态生成class名这一手段&＃xff0c;来实现局部作用域的。显然&＃xff0c;这样的class名就可以是唯一的&＃xff0c;不管原本的css代码写得有多随便&＃xff0c;都可以这样转换得到不冲突的css代码。

模拟的局部作用域也没有关系&＃xff0c;它是可靠的。

这个CSS Modules的例子说完了&＃xff0c;但你一定跟我最初看到的时候一样有很多问题。

CSS Modules的应用细节

如何启用CSS Modules

“webpack编译css我也用过&＃xff0c;怎么我用的时候不长这样&＃xff1f;”

一般来说&＃xff0c;require一个css文件的写法是&＃xff1a;

require("./main.css");

但在前面的例子中&＃xff0c;用了var styles &＃61; require("./main.css");的写法。这就好像是在说&＃xff0c;我要这个css文件里的样式是局部的&＃xff0c;然后我根据需要自行取用。

在项目里应用CSS Modules有很多方法&＃xff0c;目前比较常用的是使用webpack的css-loader。在webpack配置文件里写css-loader?modules就可以开启CSS Modules&＃xff0c;例如前面的例子所用的&＃xff1a;

module: {loaders: [{test: /\.css$/,loader: &＃39;style!css?modules&＃39;}]
}

才发现一直用着的css-loader原来有这功能&＃xff1f;其实&＃xff0c;CSS Modules确实是一个后来才并入css-loader的新功能。

自定义生成的class名

“名字都这样了&＃xff0c;还怎么调试&＃xff1f;”

为css-loader增加localIdentName参数&＃xff0c;是可以指定生成的名字。localIdentName的默认值是[hash:base64]&＃xff0c;一般开发环境建议用类似这样的配置&＃xff1a;

{test: /\.css$/,loader: &＃39;style!css?modules&localIdentName&＃61;[name]__[local]___[hash:base64:5]&＃39;
}

同样应用到前面的例子里&＃xff0c;这时候就会变成这样的结果&＃xff1a;

这样是不是要有意义多了&＃xff1f;

如果是线上环境&＃xff0c;可以考虑用更短的名字进一步减小css文件大小。

CSS Modules下的html

&＃xff08;看了前面例子里的el.outerHTML &＃61; ...后&＃xff09;

“什么&＃xff0c;outerHTML&＃xff1f;class名还要拼接&＃xff1f;你家html才这么写呢&＃xff01;”

很遗憾&＃xff0c;CSS Modules官方的例子&＃xff0c;也是这个意思&＃xff1a;要使用CSS Modules&＃xff0c;必须想办法把变量风格的class名注入到html中。也就是说&＃xff0c;html模板系统是必需的&＃xff0c;也正是如此&＃xff0c;相比普通css的情况&＃xff0c;CSS Modules的html写起来要更为费劲。

如果你搜一下CSS Modules的demo&＃xff0c;可以发现大部分都是基于React的。显然&＃xff0c;虚拟DOM风格的React&＃xff0c;搭配CSS Modules会很容易&＃xff08;ES6&＃xff09;&＃xff1a;

import styles from &＃39;./ScopedSelectors.css&＃39;;import React, { Component } from &＃39;react&＃39;;export default class ScopedSelectors extends Component {render() {return (

如果不使用React&＃xff0c;还是那句话&＃xff0c;只要有办法把变量风格的class名注入到html中&＃xff0c;就可以用CSS Modules。原始的字符串拼接的写法显然很糟糕&＃xff0c;但我们可以借助各种模板引擎和编译工具做一些改进。下面请看一个用Jade的参考示例。

想象一下你有一个用普通css的页面&＃xff0c;但你想在一小块区域使用CSS Modules。这一块区域在一个容器元素里&＃xff1a;

然后用jade来写html&＃xff08;关联的css文件为module_sp.css&＃xff09;&＃xff1a;

- styles &＃61; require("./module_sp.css");
h2(class&＃61;styles.title) a title for CSS Modules

接下来&＃xff0c;仍然是在Javascript里添加这段jade生成的html&＃xff1a;

var el &＃61; document.getElementById("module_sp_container");
var template &＃61; require("./main.jade");
el.innerHTML &＃61; template();

最后&＃xff0c;记得在css-loader启用CSS Modules的同时&＃xff0c;增加jade-loader&＃xff1a;

{test: /\.jade$/,loader: &＃39;jade&＃39;
}

编译运行&＃xff0c;就可以得到想要的结果。除Jade以外&＃xff0c;还有些其他CSS Modules的html应用方案&＃xff0c;推荐参考github上的这篇issue。

目前CSS Modules还在发展中&＃xff0c;而且也在考虑改进CSS Modules下的html写作体验。CSS Modules团队成员有提到一个叫CSS Modules Injector的未来规划项目&＃xff0c;目的是让开发者不用Javascript也可以使用CSS Modules&＃xff08;这就很接近原生html &＃43; css的组合了&＃xff09;。

CSS Modules下的样式复用

“样式都是唯一的了&＃xff0c;怎么复用&＃xff1f;”

我们已经说了挺多普通css单个全局作用域的坏处。但对应的&＃xff0c;这也有一个很大的好处&＃xff0c;就是便于实现样式的复用。css理论OOCSS也是在追求这一点。

CSS Modules提供一个composes方法用于样式复用。例如&＃xff0c;你有一个btn.css里有一条&＃xff1a;

.btn{display: inline-block;
}

然后&＃xff0c;你在另一个CSS Module的module_sp.css里可以这样引入它&＃xff1a;

.btn-sp{composes: btn from "./btn.css";font-size: 16px;
}

那么&＃xff0c;这个div.btn-sp的DOM元素将会是&＃xff1a;

可以看到&＃xff0c;composes的用法比较类似sass的&＃64;extend&＃xff0c;但不同于&＃64;extend的是&＃xff0c;composes并不增加css里的选择符总量&＃xff0c;而是采用组合多个class名的形式。在这个例子里&＃xff0c;原本仅有1个class的div.btn-sp&＃xff0c;变成了2个class。

因此&＃xff0c;CSS Modules建议只使用1个class就定义好对应元素所需的全部样式。它们会再由CSS Modules转换为适当的class组合。

CSS Modules团队成员认为composes是CSS Modules里最强大的功能&＃xff1a;

For me, the most powerful idea in CSS Modules is composition, where you can deconstruct your visual inventory into atomic classes, and assemble them at a module level, without duplicating markup or hindering performance.

更详细的composes的用法及其理解&＃xff0c;推荐阅读CSS Modules: Welcome to the Future。

其他可能有用的补充

和已有的普通css共存

很多项目会引入Bootstrap、Materialize等框架&＃xff0c;它们是普通的、全局的css。此外&＃xff0c;你也可能自己会写一些普通css。如何共存呢&＃xff1f;CSS Modules团队成员对此提到过&＃xff1a;

a CSS Module should only import information relative to it

意思是&＃xff0c;建议把CSS Modules看做一种新的css&＃xff0c;和原来的普通css区分开来。比如&＃xff0c;composes的时候&＃xff0c;不要从那些普通的css里去取。

在css-loader里通过指定test、include、exclude来区分它们。保持CSS Modules的纯净&＃xff0c;只有想要应用CSS Modules的css文件&＃xff0c;才启用CSS Modules。

只转换class和id

经过我自己的测试&＃xff0c;CSS Modules只转换class和id&＃xff0c;此外的标签选择符、伪类等都不会被转换。

建议只使用class。

一个CSS Module的输出

简单用console.log()就可以查看CSS Module的输出&＃xff1a;

var styles &＃61; require("./main.css");
console.log("styles &＃61; ", styles);

结果类似这样&＃xff1a;

{"btn-sp": "_2SCQ7Kuv31NIIiVU-Q2ubA _2r6eZFEKnJgc7GLy11yRmV",title: "_1m-KkPQynpIso3ofWhMVuK"
}

这可以帮助理解CSS Modules是怎样工作的。

预编译器

sass等预编译器也可以用CSS Modules&＃xff0c;对应的loader可能是这样&＃xff1a;

{test: /\.scss$/,loader: &＃39;style!css?modules!resolve-url!sass?sourceMap&＃39;
}

注意不要因为是sass就习惯性地用嵌套写法&＃xff0c;CSS Modules并不适合使用包含选择符。

建议的命名方式

CSS Modules会把.title转换为styles.title&＃xff0c;由于后者是用在Javascript中&＃xff0c;因此驼峰命名会更适合。

如果像我之前那样写.btn-sp&＃xff0c;需要注意在Javascript中写为styles["btn-sp"]。

此外&＃xff0c;你还可以为css-loader增加camelCase参数来实现自动转换&＃xff1a;

{test: /\.css$/,loader: &＃39;style!css?modules&camelCase&＃39;,
}

这样即便你写.btn-sp&＃xff0c;你也可以直接在Javascript里用styles.btnSp。

结语

无论是一直以来我们认真遵循的命名约定&＃xff0c;还是这个新的CSS Modules&＃xff0c;目的都是一样的&＃xff1a;可维护的css代码。我觉得就CSS Modules基本还是在写css这一点来说&＃xff0c;它还是很友好的。

虽然本文为了严谨&＃xff0c;结果写了相当长的篇幅&＃xff0c;但希望你读过之后&＃xff0c;还能觉得CSS Modules是简单易懂的。因为这样&＃xff0c;我就达成我的目的&＃xff1a;扣题&＃xff0c;了。

&＃xff08;重新编辑自我的博客&＃xff0c;原文地址&＃xff1a;http://acgtofe.com/posts/2016/04/css-modules-made-simple&＃xff09;