表单一直以来对于CSSer来说都是一件不易的事情，很难用CSS处理好表单要样式。但是有一些很少使用的选择器，却赋予我们不一样的能力，可以让我们很好的控制input元素和其周边元素的样式，而且是根据功能来调整不同的样式，这些往往都是通过JavaScript辅助完成的。而这些选择器中有一些是较新的，而另一些是老的选择器，只不过没有过多的被重视，甚至没什么人使用。以至于这么强大的功能就这样被忽视。

最近，我在Twitter分享了一篇关于用户界面的文章。我喜欢Illusions，但这对我来说是一个新的东西：一个修正的圆比几何图形看起来更圆！圆角矩形也是这样。令人惊讶的是，我还发现，自iOS7以来，苹果一直在使用这个技巧。在数学上，它被称为Lamé Curve or Superellipse。

在之前两篇文章中我们已经讨论过如何使用BEM和Namespace来编写模块化的CSS。这篇文章中，我想避开把CSS选择器作为CSS文件结构和组织的依据的方法。如果你思考过关于什么是文件组织的最佳实践，或者怎样能够在项目目录中更容易的找到你要找的CSS文件，或者一个文件应该是多大或者多小合理等问题，那么这篇文章就是为你写的。让我们先看下你一般组织资源的两种方法。

上周，我分享了如何使用BEM创建一个合理的CSS架构。 虽然BEM很棒，但它只是解决方案的一部分。 还有另一部分我还没有提到 —— 命名空间。在今天的这篇文章中，我想与大家分享一下为什么只用BEM还是不够的，以及如何使用命名空间来弥补一些不足。

你是否做过多页面的大型网站或者其中一部分？如果你做过，你可能会意识到 CSS 架构不够强大所带来的恐惧。你可能还会研究如何编写可维护的 CSS。由于我们的行业很棒，我们有很多推荐的解决方案。因为专家们的纷纷加入，于是我们有 BEM，OOCSS，SMACSS，Atomic Design 等许多选择。现在，问题不是痛苦 “我不知道该怎么办”，而是： “有这么多的方法，我应该尝试哪个？”我是不是应该把所有的都用一遍，是不是只有一种方法才适合我，或者我是不是应该参考它们做一个自己的架构？。我开始只用一种方法。然后，当我尝试不同的方法时，我开始把我认为有意义的东西包含在我的探索过程中。 在这篇文章中，我想和大家分享一下我如何构建 CSS 以及为什么我这样做。 希望它可以帮助你找到你喜欢的方法。

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

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

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

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

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