浅析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点优势，就可以完胜整一堆样式进一个类的写法。