浅析atom-style CSS思想
一、atom-style CSS思想
最近看到GitHub新版首页的源代码，GitHub的部分页面使用到了 atom-style CSS，比如：
<div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
<span class="js-jump-to-badge-search-text-default d-none" aria-label="in all of GitHub">
Search
</span>
<span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
All GitHub
</span>
<span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
</div>
其实我之前一直就是采用的这种思想，因为很多样式可重复使用，提取出来一方面自己书写很方便，另一方面可以大量减少vue文件里的css代码，进而减少vue文件的size。但是我一般不会拼这么多css类，一般 < 5 个类名就可以，多的就会再组合一个class类样式。
github上有一个比较火的库：atom.css。atom：原子的意思，顾名思义就是原子化CSS的意思。
atom.css定义为提供基础类的CSS库，一个class对应一个单独的CSS属性，与Bootstrap、Ant Design等UI框架提供的块状CSS不同的是，atom.css单一属性class将各种CSS块状属性解耦，开发者在书写模板时拥有了极大的自由，在布局时基本上不要去写单独的CSS，而这为后续开发和维护提供了足够的灵活性。atom.css更为强大的一点是，它极大地缩短了开发者书写模板的时间，也就是说让开发者有更多的时间去关注业务逻辑，让许多业务特别重的开发人员可以更快地完成工作任务。
atom.css的灵感来源于有机化学。在有机化学中，元素作为最小单位，构成各种有机物，不同的元素经过排列组合可以形成不同的有机物，再由这些有机物构成物质。
atom.css将常用的 CSS属性转换成单一的class，比如 display:flex 转化为 .flex {display:flex}，当我们在使用HTML写页面骨架的时候，你就可以一边写结构，一边写样式，省去了一部分在写完HTML结构之后再去写界面样式的时间。
.flex{
display:flex;
}
.justify_center{
justify-content:center;
}
.align_center{
align-items:center;
}
atom.css符合当下流行的css in js的设计理念，当你熟悉它的“表达方式”之后，你再也不想用什么框架了，而且它还可以加深你对css的理解，最重要的是，它构建用户界面，超快！
atom.css目前有100+个单元class，其实我们没必要用他的类库，我们只需要这种思想即可，然后我们可以写一个公共的public.css，写上我们自己网页经常用到的样式，形成自己的css库，然后在写页面html结构的时候，就直接在class里通过几个class类名组合达到想到的效果。
二、为什么要使用atom-style CSS
现在大部分搞前端的应该还是这样写 CSS 的：
.mock {
margin: auto;
font-size: 16px;
// ...
}
<div class= 'mock'> mock</div>
以上代码就是举个例子，大部分情况应该都是写一个类，然后整一堆样式进去。但是这种方式写多了以后，你应该会感受到一些痛点，比如说：
-
取名困难，节点结构一多，取名真的是个难事。当然了，我们可以用一些规范或者选择器的方式去规避一些取名问题。
-
需要用 JS 控制样式的时候又得多写一个类，尤其交互多的场景。
-
组件复用大家都懂，但是样式复用少之又少，这样就造成了冗余代码变多。
-
全局污染，这个其实现在挺多工具都能帮我们自动解决了。
-
死代码问题。JS 我们通过 tree shaking 的方式去除用不到的代码减少文件体积，但是 CSS 该怎么去除？尤其当项目变大以后，无用 CSS 代码总会出现。
-
样式表的插入顺序影响了 CSS 到底是如何生效的。
使用atom-style CSS的思想，我觉得优点有很多，比如：
1、样式复用：自己写好定义的类，在写html结构的时候就可以直接将样式写出来了，不需要再到style里去写样式，这样的话，我的一个vue页面，有时候基本都不需要写style。相当于我们把通用的样式拆分为原子形式，然后拼接组合成自己想要的样式效果，vue的style里就只写一些页面特定的样式效果。这样我做的几个项目里基本上都是一个public.css通用样式文件，再加少量特定的页面内的style就可以完成绝大部分设计效果。因为设计美感本来就讲究对称美，所以很多比如字体、间距、颜色、盒子padding等，都会是固定的几种，不可能会花里胡哨、大小不一等。
2、避免代码冗余，可以极大减少文件体积
3、全局修改很方便
我觉得这3点优势，就可以完胜整一堆样式进一个类的写法。
