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

上一篇:你是怎么看待SaaS的?


下一篇:云计算离普通用户有多远?