atom.css

大家好，我写了一个css库atom.css，蛮好用的，所以忍不住分享给大家。(github.com/isVertical/…)

起因

写HTML几年了，再到如今的JSX，最大的感受不是枯燥，而是眼花。写样式的时候，往往需要再HTML/JSX文件和CSS文件之间来回切换，眼球频繁转动，再加上大屏刺眼，很容易引起眼疲劳，如果个人有抽烟，喝酒或是玩手游的习惯，每天早上起床眼睛里都会有血丝，时间长了，就容易引起眼疾。

于是乎，经过一段时间的归纳，我做了一个写界面样式的新方案—atom.css。事实上从这个想法出来到我做开源项目这之间我还犹豫了很久，因为atom.css做的一些事情很平常，无非就是把CSS属性写成一个独立的class，在这之前很多UI框架基本上都是这么干的，所以我也有些怀疑这个开源项目的必要性，这之后，我开始思考atom.css能带给开发者什么？atom.css和那些UI框架有哪些不同？凭什么让其他开发者放弃框架来使用atom.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>

很多东西，推演使用到极致，它就有了不一样的意义。

我将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;
}

.left{
    float:left;
}

.right{
    float:right;
}

atom.css符合当下流行的css in js的设计理念，当你熟悉它的“表达方式”之后，你再也不想用什么框架了，而且它还可以加深你对css的理解，最重要的是，它构建用户界面，超快！

内容

atom.css目前有100+个单元class,足以应对页面布局的大部分CSS,atom.css的更新频率是每个星期天更新，我会搜集同事以及个人还有其他开发者的需求，整理衡量之后进行更新，我的愿景是，让atom.css成为一种标准，甚至，在未来，HTML原生就支持atom.css，以下即为大部分class:

Class Name
`border_box`	`content_box`	`flex`	`flex_row`
`flex_row_reverse`	`flex_column`	`flex_column_reverse`	`flex_wrap`
`flex_nowrap`	`flex_wrap_reverse`	`justify_center`	`justify_start`
`justify_end`	`justify_between`	`justify_around`	`justify_evenly`
`justify_initial`	`align_center`	`align_start`	`align_end`
`align_stretch`	`align_baseline`	`align_initial`	`left`
`right`	`clearfix`	`margin_center`	`margin_xcenter`
`margin_ycenter`	`text_center`	`text_left`	`text_right`
`text_justify`	`text_last_center`	`text_last_left`	`text_last_right`
`text_last_justify`	`absolute`	`relative`	`fixed`
`static`	`sticky`	`none`	`block`
`inline`	`inline_block`	`list_item`	`radius_0 - radius_20`
`w_100`	`h_100`	`w_100vw`	`h_100vh`
`m_0 - m_200`	`mt_0 - mt_200`	`mb_0 - mb_200`	`ml_0 - ml_200`
`mr_0 - mr_200`	`p_0 - p_200`	`pt_0 - pt_200`	`pb_0 - pb_200`
`pl_0 - pl_200`	`pr_0 - pr_200`	`shadow_normal`	`shadow_medium`
`shadow_high`	`white`	`whitesmoke`	`white_sub`
`black`	`color_333`	`color_888`	`black_sub`
`red`	`blue`	`green`	`bg_white`
`bg_whitesmoke`	`bg_white_deep`	`bg_black`	`bg_333`
`bg_888`	`font_normal`	`font_bold`	`font_bolder`

用法

Full example:

<div class="w_100vw h_100vh flex justify_center align_center bg_yellow color_333 font_bold font_64">
    Example
</div>

Output:

可能有人会觉得这样写看起来不怎么样，但是当时熟悉了在HTML/JSX中使用atom.css写CSS，那便-一发而不可收拾那！相信我，你绝对会爱上这种写法，这样写是会上瘾的！

最后

atom.css使用的是MIT协议，还是很自由的!我的初衷是，优化工程架构，减少重复性工作，让广大攻城狮同胞有多余的时间来享受一下生活。

欢迎star,欢迎pull requests,只有两点要求：一是要遵循下划线的命名规则，二是保持class的单一属性原则。

下划线命名规则与驼峰命名相比可辨识度高一些，易于语义化，不采用中横线是因为中横线会造成视觉障碍，对于语义化不是那么友好；class的单一属性原则是atom.css的核心，这是一定要遵守的，不过后续可能会增加私有变量和原子组件的class，希望大家继续关注atom.css，谢谢!

(github.com/isVertical/…)

atom.css 1.0正式发布！从此抛弃bootstrap等UI框架，拥抱css in js/html！写样式时间减少80%，mm再也不用担心我加班了！

atom.css

起因

来源

内容

用法

最后