原文地址：https://css-tricks.com/css-mo...最近对CSSModules很好奇。如果您听说过它们，那么此博客适合您。我们将探索它的目的和主旨。如果你也好奇，敬请关注，下一篇博文我们将介绍如何使用CSSModules。如果您想自己尝试并学习如何使用它，第三部分将适合您。这部分剖析了如何在React环境中使用它。什么是CSS模块？根据官方仓库介绍，CSSModules是：默认情况下，所有类名和动画名都属于本地作用域的CSS文件。所以CSSModules不是官方规范，也不是浏览器的机制，它是一个构建步骤中的过程。（构建通常需要借助webpack或browserify）。在构建工具的帮助下，可以限定类名或选择器名的范围。（类似于命名空间。）这到底是什么？我们为什么要做这个？我们很快就会谈到这一点。首先，不要忘记HTML和CSS是如何工作的。在HTML中添加一个class：Anexampleheading在CSS中，这个class定义如下：.title{background-color:red;}只要在HTML中添加CSSdocument，那个

的背景颜色是红色的。我们不需要手动处理CSS和HTML文件。浏览器本身了解这些文件的格式。CSSModules与上述方法不同。我们不写纯HTML，我们需要将所有标签写在一个Javascript文件中，例如index.js。这是一个如何工作的例子（我们稍后会看到更多真实的例子）：importstylesfrom"./styles.css";element.innerHTML=`一个例子标题

`;在我们构建的这一步，编译器会搜索我们导入的styles.css文件，然后到我们刚刚写的js文件中，通过styles.title类使.title可用。我们的构建步骤将同时将它们处理成新的、单独的HTML和CSS文件，并用新字符串替换HTML和CSS选择器类。构建工具生成的HTML可能如下所示：示例标题构建工具生成的CSS可能如下所示：._styles__title_309571057{background-color:red;}classattribute和.title选择器完全没有了，取而代之的是这个全新的字符串；我们的源CSS文件也不服务于浏览器。正如HugoGriaudel在他的本模块教程中所说：[类]是动态生成的、唯一的，并映射到当前样式。这就是为什么样式也有作用域的原因。它们仅限于特定模板。如果我们有一个buttons.css文件，我们将把它导入到buttons.js模板中，并且css文件中的.btn类相对于其他模板（例如forms.js）将不可用，除非我们在此做同样的事情文件导入。为什么我们要把CSS和HTML做成这样呢？我们这样做的真正原因是什么？我们为什么要使用CSS模块？使用CSSModules，您可以确保所有样式都可以服务于单个组件：集中在一个地方只适用于该组件，其他组件不适用此外，任何组件都可以有一个真正的依赖关系，就像这样：从“导入按钮”。/buttons.css";importpaddingfrom"./padding.css";element.innerHTML=``;这个设计的目的是解决CSS中全局作用域的问题。你有没有为了提高效率节省时间而简单写过css？并且根本不考虑您是否会影响其他代码？您是否曾经在样式表的底部随意点击一些位和废话，然后试图返回并重新组织它但从来没有这样做过？您是否曾见过一种模式，但不完全了解它的含义？即使它们在当前标签中使用？你有没有想过如何在不破坏任何东西的情况下弃用一些现有的样式？您是否考虑过这些样式是仅作用于自身还是依赖于其他样式？或者在哪里重新覆盖样式？这些问题可能会导致头痛、紧张的项目进度以及您的思绪在窗外徘徊。但是当你有CSSModules的时候，关键是这个默认局部作用域的概念，这个问题就会被避免。你必须考虑写作风格的便利性。例如，如果你在HTML中使用random-gross-class而不应用CSS模块样式类进行转换，则不会应用此样式，因为选择器将转换为._style_random-gross-class_0038089.composes关键字我们现在有一个名为type.css的模块来呈现文本样式。在那个文件中，我们可能有这样的代码：字体大小：30px；line-height:35px;}我们会在我们的模板中声明类：importtypefrom"./type.css";element.innerHTML=`Thisisaheading;`compiled模板上的标签如下：Headingtitle使用compose关键字将两个类都绑定到元素上，从而避免了类似解决方案的一些问题，例如Sass中的@extend。我们甚至可以编写一个单独的CSS文件。.element{撰写：来自“./colors.css”的深红色；字体大小：30px；line-height:1.2;}在构建CSS模块的过程中不需要BEM。有两个原因：易于解析——像type.display这样的代码对于开发人员来说就像BEM-y.font-size__serif--large。当BEM选择器更长时，可能更容易理解。局部作用域——例如，我们在模块中有一个类似.big的类来修改字体大小属性。同样，我们也可以使用.big同时增加padding和font-size。不要紧！它们并不冲突，因为作用域中的样式有它们自己的含义。即使一个模块导入了2个样式表，它也有通常的名称，我们的构建工具会在该类前面加上前缀以进行区分。换句话说：CSS模块消除了特异性问题。很酷，不是吗？这些只是CSS模块的一些优点。如果您想了解更多信息，请参阅GlenMadden撰写的更多有关这样做的好处的文章。本系列的下一篇文章将探讨如何在您的项目中使用Webpack和CSS模块。我们会使用最新的ES2015特性来实现，同时也会给出一些代码示例来引导大家理解。期待与您交流，共同进步。欢迎大家加入我创建的与前端开发息息相关的技术讨论群：SegmentFault技术圈：ES新规范语法糖SegmentFault专栏：趁你还年轻，做一个优秀的前端工程师知乎专栏：趁你年轻，做优秀的前端工程师Github博客：趁你还年轻233的个人博客前端开发QQ群：660634678微信公众号：人寿归/excellent_developers努力成为优秀的前端工程师！