简介

因为技术站的更新，我们公司 M 站的项目，开始往 React 迁移。然后在对于 React 中 CSS 的使用方式上，我和一个同事有了很大的分歧。

我是一个非常推崇原子化使用 CSS 的人。我喜欢使用类似：

.dn{ display:block; }
.fs24{ font-size:24px; }
.pr{ position:relative; }
/*...*/

这样的方式去使用 CSS 样式。和我角度不一样的同事可能会更倾向于组件化的方式，类似：

.demo{
    position:relative;
    display:block;
    font-size:24px;
    /*...*/
}

我第一次对于原子化这种 CSS 的方式有了解，是来自我的男神，张鑫旭的活字印刷CSS。后面在和同事争论的时候，又查阅了很多的资料。发现可能用得最久也是一直在坚持做的，可能是来自雅虎的「Atomic CSS」。他们在使用方式上有很大的差别，但是他们的原子化 CSS 的思维是一样的。

示例

这篇文章其实我主要是想通过一个例子（我真的是用尽了洪荒之力才想出来的），来让大家理解组件化和原子化的区别。

假设我们有名为「原子」和「组件」两个机器人制造厂。

他们现在要同时竞标一个制造3种机器人各50台的项目。这3个机器人长这样「原谅我拙略的绘画技巧」：

然后两个厂回去之后给到了如下的方案：

第一眼我们看过去，我们肯定会觉得「组件厂」的整个设计干净整洁，然后「原子厂」这个乱七八糟的是个什么鬼？

然后我们再来看看他们的模具需求是什么样的：

在「组件厂」里因为3个机器人的手是一样的，所以他们并不需要做15（3*5）个组件，而只需要做10个组件就好。

对于「原子厂」来说他们把组件拆分到了最小的单位，所以只需要9个组件。

然后如果我们临时需要再添加两种机器人：

「组件厂」这边因为有3个组件之前已经有了，所以这边需要再增加6个组件。

「原子厂」这边因为没有橙色，所以这边需要再增加一个橙色的原子组件。

我这几个图里面，其实忽略了组件到整体的这个拼装成本。对于「组件厂」来说，组件到整体每个机器人需要拼接4次，而「原子厂」则需要拼接：14次（5*2+4）次。

大家如果把这个机器人，想象成我们网页中的模块，这中间的颜色和形状想象成我们的CSS属性，就能理解在我们 CSS 的世界里面，组件化和原子化是什么样的一种状况了。

在 @FateRiddle 同学的文章 React拾遗：从10种现在流行的 CSS 解决方案谈谈我的最爱（中）有提到，原子化的概念，是inline css一中简写方式，在组件化开发浪潮中才真正变得可行。

当然我讲这个的目的不是要证明原子化的思维比组件化的思维更好。因为就我个人而言，我觉得「原子化」其实只是「组件化」的一种极致使用方式而已。在React CSS的写法里面，应该是一个可以值得尝试的方案。

这里还有一篇从思维方式，到项目经验，到和网友斗嘴等各个方面介绍「Rethinking CSS」的网页，强烈推荐大家看一下。

讲了这么多，感觉都只是空谈理论。这边我多年的使用经验，总结的一个 ACSS 的 npm 类库 sacss 供大家使用。

和这些项目相比，我这边的方案，优点在于简单和极致的 CSS 开发体验。简单到整个逻辑只落点在命名规则，看完文档 5 分钟就会用，甚至完全理解所有的逻辑。极致的 CSS 开发体验，体现在熟悉这套规则之后，你会开始怀疑，你的手指速度慢于你思考 CSS 的速度。

当然为了追求简单和开发体验这也是缺点，就是不够完善，没有处理类似 hover,focus... 等中间态，也没有添加任何自定义的响应点。这部分需要大家基于自己项目和 命名规则 自由扩展。