[翻译]理解CSS模块方法-脚后跟着猫

来源：动视网责编：小采时间：2020-11-27 16:44:33

[翻译]理解CSS模块方法-脚后跟着猫

[翻译]理解CSS模块方法-脚后跟着猫:在这个前端发展日新月异的世界，能够找到有所影响的概念相当困难，而将其准确无误的传达，让人们愿意尝试，更是难上加难。拿CSS来看，在我们写CSS时，工具侧最大的变化，也就是CSS处理器的使用，如：可能公认最好的SASS。还有PostCSS，提供了另一种不同的解

推荐度：

点击下载本文 文档为doc格式

导读[翻译]理解CSS模块方法-脚后跟着猫:在这个前端发展日新月异的世界，能够找到有所影响的概念相当困难，而将其准确无误的传达，让人们愿意尝试，更是难上加难。拿CSS来看，在我们写CSS时，工具侧最大的变化，也就是CSS处理器的使用，如：可能公认最好的SASS。还有PostCSS，提供了另一种不同的解

这里看一下，怎么在JS组件中使用。

import styles from './styles.css';

element.innerHTML = `
 CSS Modules are fun.
`;

以上代码会生成下面这样的代码（使用webpack构建工具的默认配置）:

CSS Modules are fun.

._20WEds96_Ee1ra54-24ePy {
 color: deeppink;
 max-width: 42em;
 margin: 0 auto;}

类名，可以通过配置把类名加上特殊前缀，或使用短命名，但这并不是重点（虽然短命名，代表着更少的CSS样式）。

重点是指出，类名是动态生成的，唯一的，并且和样式表正确映射的。

几个关于CSS模块的观点

上面讲了它是如何工作的。现在你心里一定有疑惑，下面让我们一一解决。

生成的代码太丑了！

类名又不是为了漂亮。它存在的目的是把样式应用到元素上，所以这并不值得关注。

不太容易调试

只是是要通过构建过程生成的代码，调试起来都不容易。Sass也不容易调试，但可以使用sourcemap，css模块也可以。实际上尽量类名是生成的，但根据模块里的具体样式调试并不难。如果你知道你正在调试的是哪个模块，你就可以去对应模块找到对应的样式了。

样式没法重用

重用性是没错的，但CSS模块的目的就是把样式组件化，清除全局的冲突和依赖。

另外，你也可以定义全局的类（用:global()），比如一些公用的样式。这些类名也是可以在js组件中调用的

:global(.clearfix::after) {
 content: '';
 clear: both;
 display: table;}

CSS模块也可以像SASS的@extend一样，通过存在的模块来扩展。不是直接复制一份样式过来，而是对各选择器样式进行合并。

.base {
 composes: appearance from '../AnoherModule/styles.css';}

CSS模块需要其它的构建工具，如：webpack,browserify等工具

这和SASS编译.scss文件为正确的CSS样式，PostCSS把样式处理为浏览器兼容的代码一样。既然已经使用了构建工具，这点也不用多想了。

为什么还在讨论这些点？

因为不确定未来的CSS模块是不是现在这样的，但这一定是样式书写的方向。大型网站使用的大量的全局样式，不适合分解成小的组件。

全局唯一的CSS名，既强大又脆弱。无论是CSS模块还是以后其它工具。都需要找到既可以具备全局样式的公用，又可以避免同作用域下样式的命名冲突的解决方案。

入门

上面提到了，使用CSS模块需要webpack或browserify来构建。

Webpack

使用webpack，先修改webpack.config.js文件，添加以下配置项，开启CSS模块功能。

{
 test: /\.css$/,
 loader: 'style-loader!css-loader?modules'}

以上配置会在你的页面插件

产品服务发展历程企业资讯企业文化关于我们加入我们联系我们网站导航网站律师

中国扫黄打非网

赣ICP备2023002352号-34

违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务

Top