「CSS思维」组件化VS原子化

废话

从我两个月前，在掘金发第一篇文章到现在，关注数每天都在以至少20个人数的量持续增长，现在马上就要突破1000大关了。可是自己却断更了很久了，想想很对不起我的粉丝们（我是想当前端网红想疯了哈哈）。于是逼迫自己写了一篇这篇，我一直想写的文章。

我是一个爱折腾设计的前端，我进公司的职位也是“偏体验的前端”。从这些标签可以看到我是一个以重构（“切图仔”）出道的前端。我喜欢的是所见即所得的代码体验，而不是在一堆理不清道不明的代码逻辑里面去寻找出口（可能是我逻辑性比较差）。

相信有很多热爱重构的前端同学，在目前组件化代码横行霸道的年代，会有种自己要被淘汰的焦虑。我之前也有这样的焦虑，只是经历了一些事情之后（就不告诉你发生了什么），我现在焦虑的点变了，我焦虑的是，我要怎么在一个不是我擅长的领域，去给那些和我思维不一样的同学分享我认为对的东西。

简介

讲了这么多废话，现在回到我的正题。

因为技术站的更新，我们公司 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」的网页，强烈推荐大家看一下。

转载于:https://juejin.im/post/5b4063936fb9a04fb016b738