简单明了地向你展示CSS模块

级联样式表

我们知道，css的全称叫做层叠样式表。这个“级联”到底是什么意思？

一种解释是，如果你先写一个风格规则(玩家1):title { color:银色；}然后在后面写了一个类似的(玩家2):title { color: gold}因为同名，2号玩家会和1号玩家打架(让你冒充我！)。结果是2号玩家获胜，职业被命名为title，最终颜色值为金色。

在css中，就像这样，一场战争随时都有可能在不发一言的情况下发生，输的一方会被赢的一方覆盖。“级联”一词可以说生动地描述了这一过程。

那么，为什么会有这样的级联呢？

css的范围

在javascript中，您可以这样搭配：

var title=' silver(function(){ var title=' gold '；console.log(标题)；//gold }()；console.log(标题)；//silver使用了javascript的功能范围，两个同名的玩家可以很好的相处。

但是回到css中的样式规则，情况完全不同。

Css不是一种编程语言，但是如果我们想给它增加一个范围的概念，那就是只有全局范围。

不管拆分成多少个css文件，不管怎么引入，所有的样式规则都位于同一个范围内，只要选择器相似，就有覆盖的可能。

减少相互影响的策略

为了减少相互影响，避免意外的风格覆盖，我们一直想了很多办法。

比如你接手别人留下的一个老项目，然后加上一个title元素，你会有意识地不使用模糊的类名。标题，因为太容易重复了。最后，您使用的名称可能是：模块-sp-title { color : deep sky blue；}即使您决定使用该名称。标题，您将添加包含选择器作为限定：模块1。title { font-size : 18px；}/* .*/.模块2。title { font-size : 14px；}的名称。模块1和。模块2应该是唯一的。这样的代码在组件(模块化)的开发风格中很常见。

此外，一些著名的css理论，如SMACSS，建议您对所有布局样式使用l-或layout-的前缀来区分它们。

有许多类似的做法，但它们都试图提供一个合理的命名约定。合理的命名约定确实是组织css代码的有效策略。

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

技术流程模块化

Css Modules是一种在技术流中组织Css代码的策略，它将为css提供默认的本地范围。

CSS模块是如何做到的？看一个简单的CSS模块的例子。

有这样一个html元素：

H2 id=' example _ title ' class=' title ' CSS模块的标题/h2

按照普通的css写法，我们可以这样给它添加样式：标题{背景色-color : snow；}现在我们切换到CSS Modules。首先，css保持不变。然后，修改html的写法。与其直接写html，不如在javascript文件中动态添加(css文件名为main.css):

var styles=require('。/main . CSS ')；var El=document . getelementbyid(' example _ title ')；El . OuthHTML=' H2 class=' style . title ' ' CSS Modules/H2的一个标题'；咦，需要一个css文件？没错，所以我们需要使用webpack。编译后，html和css将如下所示：

看到这么难看的类名，你大概明白了，css Modules改变不了css全局作用域的本质，它依靠动态生成类名的手段来实现局部作用域。很明显，这样的类名可以是唯一的，无论原始的css代码写得多么随便，都可以转换成不冲突的css代码。

模拟的局部范围也无所谓，是可靠的。

这个CSS Modules的例子已经完成了，但是你一定有和我第一次看到它时一样多的问题。

CSS模块的应用细节

如何启用CSS模块

“我曾经用webpack编译过css。为什么我不用很久？”

一般来说，要求一个css文件编写如下：

要求('。/main . CSS ')；但是，在前面的示例中，var styles=require('。/main.css)被使用；的写作。这就像说，我希望这个css文件中的样式是本地的，然后我可以根据需要使用它。

在项目中应用CSS Modules的方法有很多，其中目前常用的是使用webpack的CSS加载器。在webpack配置文件中编写css-loader？模块可以打开CSS模块，如前一个示例中所用：

module : { loaders : [{ test :/\。css$/，loader: '样式！css？Modules' }]}却发现一直使用的css-loader有这个功能？事实上，CSS Modules确实是后来并入CSS加载器的一个新功能。

自定义生成的类名”

我的名字是这样的怎么调试？"

向css加载器添加localIdentName参数可以指定生成的名称。localIdentName的默认值是[hash:base64]，对于一般开发环境，建议使用这样的配置：

{ test: /\。css$/，loader: '样式！css？modules localident name=[name]_ _[local]_ _ _[has h : base 6433605]' }也应用于前面的示例，这将成为结果：

这不是更有意义吗？

如果是在线环境，可以考虑使用较短的名称来进一步减小css文件的大小。

CSS模块下的Html

(阅读el.outerHTML=.在前面的例子中)

“外部HTML，什么？类名需要拼接？你的html是这样写的！”

不幸的是，CSS Modules的官方例子也意味着这一点：要使用CSS Modules，我们必须找到一种方法，将变量样式的类名注入html。也就是说，html模板系统是必须的，事实也正是如此。与普通的css相比，CSS Modules的html更难写。

如果你搜索CSS模块的演示，你会发现大多数都是基于React的。显然，React的虚拟DOM风格可以很容易地与CSS模块(ES6)相匹配：

从“”导入样式。/SCOpedSeectors . CSS '；从“反应”导入反应{组件}；导出默认类ScopedSelectors扩展Component { render(){ return(div class name={ styles . root } p class name={ styles . text } Scoped selecters/p/div)；}};如果不使用React，只要有办法将变量样式的类名注入html，就可以使用CSS Modules。字符串拼接的原创写的明显不好，但是我们可以借助各种模板引擎和编译工具做一些改进。让我们看一个使用Jade的参考示例。

假设你有一个普通css的页面，但是你想在一个小区域使用CSS模块。该区域位于容器元素中：

在div id=' module _ sp _ container '/div后用jade写html(关联的css文件是module_sp.css):

-style=require('。/module _ sp . CSS ')；H2(类=styles . title)CSS模块的一个标题接下来，仍然添加jade在javascript中生成的这个html:

var El=document . getelementbyid(' module _ sp _ container ')；var模板=必需('。/main . jade’；El . innerhtml=template()；最后，记得在css加载器中启用CSS模块时添加jade加载器：

{test:/\。jade $/，loader:' jade'}编译并运行，就可以得到想要的结果。除了Jade，还有其他CSS模块的html应用方案。请参考github上的这个问题。

目前CSS Modules还在开发中，我们也在考虑提升CSS Modules下的html编写体验。CSS Modules团队的成员提到了一个名为CSS Modules Injector的未来规划项目，该项目旨在使开发人员能够在没有javascript的情况下使用CSS Modules(这与原生html css的组合非常接近)。

CSS模块下的样式重用

“款式都是独一无二的，怎么重用？”

我们已经谈了很多关于单一全球范围的通用css的缺点。但相应的，这也有一个很大的优势，那就是方便实现样式的复用。CSS理论OOCSS也在追求这一点。

CSS模块为样式重用提供了一种组合方法。例如，您有一个btn.css，其中有一个：btn { display:内联块；}然后，可以在另一个CSS Module的module_sp.css中这样介绍：BTN-sp { composes 3360 BTN from '。/BTN . CSS '；font-size : 16px；}那么，这个div.btn-sp的DOM元素将是：

可以看出，compositions的用法类似于sass' @extend，但不同于@extend，compositions并没有增加css中选择器的总数，而是采用了组合多个类名的形式。在这个例子中，原本只有一个类的div.btn-sp变成了两个类。

因此，CSS Modules建议只使用一个类就可以定义相应元素所需的所有样式。然后，它们被CSS模块转换成适当的类组合。

CSS模块团队的成员认为组合是CSS模块中最强大的功能：

对我来说，CSS Modules中最强大的思想是组合，在这种情况下，您可以将可视化清单解构为原子类，并在模块级别组装它们，而不会复制标记或妨碍性能。

关于作文更详细的用法和理解，建议阅读CSS Modules :欢迎来到未来。

其他可能有用的补充剂

与现有的通用css共存

许多项目将引入Bootstrap、物化和其他框架，这些都是通用的全局css。另外，你也可以自己写一些普通的css。如何共存？CSS模块团队的成员提到了这一点：

CSS模块应该只导入与其相关的信息

意思是，建议把css Modules当做一个新的css，不同于原来的普通css。比如作曲的时候，不要从普通的css里拿。

在css-loader中，测试、包含和排除被指定来区分它们。保持css模块的纯净度，只有想应用CSS模块的CSS文件才启用CSS模块。

仅转换类和id

经过我自己的测试，CSS Modules只转换类和id，其他标签选择器和伪类不会转换。

只建议上课。

CSS模块的输出

只需使用console.log()即可查看CSS模块的输出：

var styles=require('。/main . CSS ')；console . log(' style='，style)；结果类似于这样：

{ ' BTN-sp ' : ' _ 2s CQ 7 kuv 31 iiivu-Q2ubA _ 2r 6 ezfeknjgc7 Gly 11 yrmv '，title : ' _ 1m-kkpqynpiso3 fwhmvuk ' }

这可以帮助你理解CSS模块是如何工作的。

预编译程序

Sass和其他预编译器也可以使用CSS Modules，对应的加载器可能是这样的：

{ test: /\。scss$/，loader: '样式！css？模块！解析-url！萨斯。SourceMap'}注意不要因为嵌套编写是sass就习惯性地使用嵌套编写，CSS Modules不适合使用包含选择器。

建议的命名方法

CSS模块将转换。title变成styles.title，这是javascript中使用的，所以驼峰命名更合适。

如果你写作。btn-sp正如我之前所做的，您应该注意在javascript中将它写成style[' BTN-sp ']。

此外，还可以在css-loader中添加camelCase参数，实现自动转换：

{ test: /\。css$/，loader: '样式！css？ModulescamelCase '，}这样即使你写。btn-sp，可以在javascript中直接使用styles.btnSp。

结论

无论是我们一直在仔细遵循的命名约定，还是这个新的css Modules，目的都是一样的：可维护的css代码。我觉得css Modules在基本写css方面还是很友好的。

虽然为了严谨，这篇文章写了很长时间，但希望大家看完之后，还是能发现CSS Modules很好理解。正因为如此，我实现了我的目标：推演。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。