你是否曾经为组件设计过样式，却只知道应用了不需要的CSS规则?也许你会重新考虑CSS的另一个部分，所以规则不适用，或者你会添加!important规则，只是为了让它发挥作用。这就是CSS Modules要解决的问题。让我们看看CSS Modules的官方定义：CSS Module是一个CSS文件，所有类名和动画名称默认都在本地范围内。这里的关键词是局部范围的。使用CSS Module，你的CSS类名与JavaScript中的本地变量类似。顺便说一下，CSS Module只是一个.css文件。如果你打算使用CSS Module编译器，你可以把它叫做CSS Module。

在瞬息万变的前端开发世界中，很难找到一个真正有意义的概念，并且将其清晰明了的向广大人民群众普及。把目光投向CSS，一个重大转折就是CSS预处理器的出现（在工具方面来看），其中， Sass应该是最为著名的一个。此外，还有 PostCSS，它和Sass略有不同，但是殊途同归——都是用浏览器不能解析的语法编写，并且最终编译成浏览器能够理解的语法。现在，又有一位新的成员出现了，它就是CSS模块。本文就将介绍CSS模块化的诸多优点，以及如何编写模块化的CSS。

我最近对CSS模块很好奇。如果你还没有听说过它们，这篇文章就是为你而写。我们将了解CSS模块以及它的目的是什么。如果你也感兴趣，请持续跟踪，下一篇文章将关于怎样使用CSS模块。如果你想进一步提高你的CSS模块使用技能，第三部分将关于在React环境中使用它们。

这里不止一种方法来让CSS模块与JavaScript模板、CSS文件或者构建步骤运行起来。这篇文章作为CSS模块系列文章的一部分，我们学习一种方法。本文的目的就是开始一个CSS模块项目并且运行起来。在这个项目中，要求CSS决不能依赖客户端JavaScript运行，所以构建步骤需要在部署之前将所有东西处理成可运行的HTML和CSS。我们将使用Webpack，一款构建系统和模块打包工具。在下一篇文章中我们将集中使代码处于一个渲染静态HTML的浏览器的真实的项目中。

这是讲CSS模块化系列文章的最后一篇，我将探索如何通过Webpack来建一个静态的React网站。这个静态网站将包含模板：一个主页和一个包含几个React组件的页面。我们来看看他们是怎么运作的。之前的文章中我们用Webpack快速搭建了一个工程来展示了所有依赖是如何被导入到一个文件的以及在打包过程中如何将一个唯一的classname同时在css和html中生成the basics of React。在之前的演示中，我们知道通过js来渲染我们标签，但是我们不清楚如何构建我们项目。在这篇文章中我们将用一个更真实的例子演示如何通过我们新学的Webpack知识来构建我们的项目。我把之前演示的代码放到Github上了 css-modules-react ，你可以通过这个代码开始下面的例子。

CSS Modules与W3C无关，而是构建过程的一部分。它编译你的项目，重命名选择器和类，使它变得独一无二作用于各个组件。样式被锁在这些组件中，不能在其他地方使用，除非你有特别需求。现在我们已经习惯了Web技术来驱动App，Web App，移动端和PC端的应用程序。但与简单的静态网站不同的是，应用程序通常更动态、更复杂，而且通常包括组件，甚至超出了Bootstrap和ZURB Foundation提供的功能。当一个应用程序变得复杂起来，管理它的CSS可能是一个如地狱般的任务。

多年来，我们一直与全局CSS作斗争。现在是时候结束它了。不管你使用哪种语言或框架，CSS命名的冲突不再是问题。我将向你展示如何使用PostCSS和PostCSS-modules在服务端自动处理它。CSS最初只是用来美化文档的一种工具。自1996年以来，许多事情发生了变化。浏览器不再是文档查看器了。聊天、工作、游戏，几乎没有任何浏览器不能做到的。现在，我们比在HTML中标记文本和使用CSS开发内容的网站要多得多。我们使用CSS来充分发挥它的潜力，创造出它很难处理的东西。

现代Web开发中的CSS离完美还差得远，这并不奇怪。现在，项目通常是相当的复杂的，而CSS样式又是全局性的，所以到最后总是极容易地发生样式冲突：样式相互覆盖或隐式地级联到我们未考虑到的元素。为了减轻CSS存在的主要痛点，我们在项目中普遍采用BEM的方法来。不过这只能解决CSS问题中的一小部分。对我们来说是幸运的，社区已经开发出了可以帮助我们更彻底地解决问题的解决方案。你可能已经听说过CSS Modules、Styled Componetns、Glamorous或JSS。这些只是我们今天可以添加到项目中的一些最流行的工具。如果你对这个话题感兴趣，你可以查看这篇文章：@Indrek Lasn详细介绍了CSS in JS的全部思想。

最近项目开始换React的工程，感觉好多东西都得重新开始，特别在撸CSS的时候。说实话和Vue的工程相比，体感差完了。在Vue的工程中除了Modules之外还可以使用CSS的作用域scoped的概念。用久了Vue的同学，在这方面的感觉爽死了，但是突然切到React的工程体系之下，这方面的感觉突然不要不要。拿个实例来说吧（可能我做得不到位），组件的CSS是全局的，有时覆盖起来，除了蛋疼之外，而费时，费成本。

在任何环境之下其实没有最佳，最有最适合，那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式，在社区中讨论最多的应该是CSS In JS 和 CSS Modules。前段时间在《React中CSS Modules的使用》一文中探讨了在React中怎么使用CSS Modules来管理组件和项目的CSS。事实上，使用CSS Modules还是存有一定的缺陷。这篇文章将会和大家一起聊聊React中编写CSS的姿势，然后再会花一些篇幅来讨论CSS Modules编写CSS的最佳姿势。