简朴明白带你相识CSS Modules

我们知道,css的全名叫做层叠样式表,这个“层叠”到底是什么意思呢?

有一种表明是,假如你先写了一条样式法则(选手1):

.title { color: silver; }

然后又在后边写了一条雷同的(选手2):

.title { color: gold; }

因为名字沟通,选手2就会和选手1打起来(让你丫假充我!)。功效是选手2得胜,class名为title的元素,最终的color值为gold。

css里就像这样,随时大概一言反面就产生战争,功效输掉的一方就会被胜利的一方所包围。“层叠”一词可以说形象地描写了这个进程。

那么,为什么会有这样的层叠(zhàn zhēng )呢?

css的浸染域问题

在javascript里,可以做到这样的搭配:

var title = "silver"; (function(){ var title = "gold"; console.log(title); // gold }()); console.log(title); // silver

操作javascript的函数浸染域,两位同样名为title的选手可以友好相处。

但回到css里的样式法则,环境就完全不是这么回事了。

css不是措施语言,但假如说要给它加一个浸染域的观念的话,那就是:只有全局浸染域。

无论分拆为几多个css文件,无论用奈何的方法引入,所有的样式法则都位于同一浸染域,只要选择符近似,就有产生包围的大概。

淘汰彼此影响的计策

为淘汰彼此影响,制止预料之外的样式包围,我们一直以来想过许多步伐。

好比你接办一个体人留下来的旧项目,接下来要新增一个标题元素的时候,你会有意识地不去利用.title这样恍惚的class名,因为它太容易重名了。最终,你用的名称大概是:

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

纵然你抉择要用.title这个名字,你也会加上包括选择符作为限定:

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

个中.module-1和.module-2的名字应该是独一的,这样的代码在组件化(模块化)的开拓气势气魄里很常见。

另外,一些有名的css理论,如SMACSS,会发起你为所有机关样式利用l-或layout-的前缀,以示区分。

雷同的做法尚有许多,但归结起来,都是在实验提供一种公道的定名约定。而公道的定名约定,简直是组织css代码的有效计策。

此刻,我们有了新的可用计策,CSS Modules就是个中之一。

技能流的模块化

CSS Modules是一种技能流的组织css代码的计策,它将为css提供默认的局部浸染域。

CSS Modules是如何做到的呢?来看一个CSS Modules的简朴例子吧。

有这样的一个html元素:

<h2>a title for CSS Modules</h2>


凭据普通css的写法,我们可以这样为它添加样式:

.title { background-color: snow; }

此刻我们改用CSS Modules。首先,css保持稳定。然后,修改html的写法。不再这样直接写html,而是改为在javascript文件里动态添加,这样做(css文件名为main.css):

var styles = require("./main.css"); var el = document.getElementById("example_title"); el.outerHTML = '<h2>a title for CSS Modules</h2>';

咦,require了一个css文件?对的,所以要用到webpack。编译后,html和css会酿成这样:

简单大白带你领会CSS Modules

看到这样不太雅观的class名你或许就大白了,CSS Modules无法改变css全局浸染域的天性,它是依靠动态生成class名这一手段,来实现局部浸染域的。显然,这样的class名就可以是独一的,不管原本的css代码写得有多随便,都可以这样转换获得不斗嘴的css代码。

模仿的局部浸染域也没有干系,它是靠得住的。

这个CSS Modules的例子说完了,但你必然跟我最初看到的时候一样有许多问题。

CSS Modules的应用细节

如何启用CSS Modules

“webpack编译css我也用过,怎么我用的时候不长这样?”

一般来说,require一个css文件的写法是:

require("./main.css");

但在前面的例子中,用了var styles = require("./main.css");的写法。这就仿佛是在说,我要这个css文件里的样式是局部的,然后我按照需要自行取用。

在项目里应用CSS Modules有许多要领,今朝较量常用的是利用webpack的css-loader。在webpack设置文件里写css-loader?modules就可以开启CSS Modules,譬喻前面的例子所用的:

module: { loaders: [{ test: /\.css$/, loader: 'style!css?modules' }] }

才发明一直用着的css-loader本来有这成果?其实,CSS Modules确实是一个厥后才并入css-loader的新成果。

自界说生成的class名

名字都这样了,还怎么调试?”

为css-loader增加localIdentName参数,是可以指定生成的名字。localIdentName的默认值是[hash:base64],一般开拓情况发起用雷同这样的设置:

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

同样应用到前面的例子里,这时候就会酿成这样的功效:

简单大白带你领会CSS Modules

这样是不是要有意义多了?

假如是线上情况,可以思量用更短的名字进一步减小css文件巨细。

CSS Modules下的html

(看了前面例子里的el.outerHTML = ...后)

“什么,outerHTML?class名还要拼接?你家html才这么写呢!”

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsjyyw.html