「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」的网页，强烈推荐你们看一下。

解决方案

更新于 2019/10/22

名称	NPM	github	CDN
@_nu/css-acss

讲了这么多，感受都只是空谈理论。这边我多年的使用经验，总结的一个 ACSS 的 npm 类库 @_nu/css-acss 供你们使用。

对于 ACSS, bootstrap, material-ui, github ... 都有相关的 类库，而后整个 ** 类库** 最完善的属于 tailwindcss。固然他们都是基于 style-system 理论建立的。上手成本相对较高，且每每须要设计师的介入。

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

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