atom.css

大家好，我寫了一個css庫atom.css，蠻好用的，所以忍不住分享給大家。(https://github.com/MatrixAge/atom.css)

起因

寫HTML幾年了，再到如今的JSX，最大的感受不是枯燥，而是眼花。寫樣式的時(shí)候，往往需要在HTML/JSX文件和CSS文件之間來回切換，眼球頻繁轉(zhuǎn)動，再加上大屏刺眼，很容易引起眼疲勞，如果個人有抽煙，喝酒或是玩手游的習(xí)慣，每天早上起床眼睛里都會有血絲，時(shí)間長了，就容易引起眼疾。

于是乎，經(jīng)過一段時(shí)間的歸納，我做了一個寫界面樣式的新方案—atom.css。事實(shí)上從這個想法出來到我做開源項(xiàng)目這之間我還猶豫了很久，因?yàn)閍tom.css做的一些事情很平常，無非就是把CSS屬性寫成一個獨(dú)立的class，在這之前很多UI框架基本上都是這么干的，所以我也有些懷疑這個開源項(xiàng)目的必要性，這之后，我開始思考atom.css能帶給開發(fā)者什么？atom.css和那些UI框架有哪些不同？憑什么讓其他開發(fā)者放棄框架來使用atom.css？直到我看了GitHub新版首頁的源代碼，GitHub的部分頁面也使用了的atom-style CSS，這時(shí)我才肯定了我的想法，我是對的。

<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定義為提供基礎(chǔ)類的CSS庫，一個class對應(yīng)一個單獨(dú)的CSS屬性，與Bootstrap、Ant Design等UI框架提供的塊狀CSS不同的是，atom.css單一屬性class將各種CSS塊狀屬性解耦，開發(fā)者在書寫模板時(shí)擁有了極大的自由，在布局時(shí)基本上不要去寫單獨(dú)的CSS，而這為后續(xù)開發(fā)和維護(hù)提供了足夠的靈活性。atom.css更為強(qiáng)大的一點(diǎn)是，它極大地縮短了開發(fā)者書寫模板的時(shí)間，也就是說讓開發(fā)者有更多的時(shí)間去關(guān)注業(yè)務(wù)邏輯，讓許多業(yè)務(wù)特別重的開發(fā)人員可以更快地完成工作任務(wù)，晚上有更多的時(shí)間用來陪家人和朋友。

來源

atom.css的靈感來源于有機(jī)化學(xué)。在有機(jī)化學(xué)中，元素作為最小單位，構(gòu)成各種有機(jī)物，不同的元素經(jīng)過排列組合可以形成不同的有機(jī)物，再由這些有機(jī)物構(gòu)成物質(zhì)。

atom.css將常用的CSS屬性轉(zhuǎn)換成單一的class，比如display:flex轉(zhuǎn)化為.flex {display:flex}，當(dāng)我們在使用HTML寫頁面骨架的時(shí)候，你就可以一邊寫結(jié)構(gòu)，一邊寫樣式，省去了一部分在寫完HTML結(jié)構(gòu)之后再去寫界面樣式的時(shí)間。

.flex{display:flex; }.justify_center{justify-content:center; }.align_center{align-items:center; }.left{float:left; }.right{float:right; }

atom.css符合當(dāng)下流行的css in js的設(shè)計(jì)理念，當(dāng)你熟悉它的“表達(dá)方式”之后，你再也不想用什么框架了，而且它還可以加深你對css的理解，最重要的是，它構(gòu)建用戶界面，超快！

內(nèi)容

atom.css目前有100+個單元class,足以應(yīng)對頁面布局的大部分CSS,atom.css的更新頻率是每個星期天更新，我會搜集同事以及個人還有其他開發(fā)者的需求，整理衡量之后進(jìn)行更新，我的愿景是，讓atom.css成為一種標(biāo)準(zhǔn)，甚至，在未來，HTML原生就支持atom.css，以下即為大部分class:

用法

Full example:

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

Output:

可能有人會覺得這樣寫看起來不怎么樣，但是當(dāng)時(shí)熟悉了在HTML/JSX中使用atom.css寫CSS，那便-一發(fā)而不可收拾那！相信我，你絕對會愛上這種寫法，這樣寫是會上癮的！

最后

atom.css使用的是MIT協(xié)議，還是很自由的!我的初衷是，優(yōu)化工程架構(gòu)，減少重復(fù)性工作，讓廣大攻城獅同胞有多余的時(shí)間來享受一下生活。

歡迎star,歡迎pull requests,只有兩點(diǎn)要求：一是要遵循下劃線的命名規(guī)則，二是保持class的單一屬性原則。

下劃線命名規(guī)則與駝峰命名相比可辨識度高一些，易于語義化，不采用中橫線是因?yàn)橹袡M線會造成視覺障礙，對于語義化不是那么友好；class的單一屬性原則是atom.css的核心，這是一定要遵守的，不過后續(xù)可能會增加私有變量和原子組件的class，希望大家繼續(xù)關(guān)注atom.css，謝謝!

https://github.com/MatrixAge/atom.css?github.com

總結(jié)

以上是生活随笔為你收集整理的css 横线_atom.css正式发布,从此跟CSS框架说拜拜。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。