一年多沒寫過文章了，今天給大家介紹一個(gè)我斷斷續(xù)續(xù)花了半年開發(fā)的 CSS 項(xiàng)目： Fower.
Fower 是什么膏燃？
Fower 是一個(gè)讓你高效開發(fā) UI 的樣式工具庫，目標(biāo)是讓你寫 CSS 不再痛苦瞳别。Fower 的核心特點(diǎn)是原子化(Atomic/utility-first)亿柑、類型安全(Type Safe)味咳、CSS in JS，它非常注重開發(fā)體驗(yàn)擦俐，讓你快速且開心的開發(fā)界面脊阴。
Fower 是框架無關(guān)的，你可以在 React蚯瞧、Vue嘿期、React native、小程序等任何 JavaScript 項(xiàng)目中使用埋合。
項(xiàng)目背景
一年前备徐，我所在的團(tuán)隊(duì)同時(shí)在開發(fā) Web、React native甚颂、小程序項(xiàng)目蜜猾。在這三類項(xiàng)目中，我們使用了各不相同的樣式方案：
- 在 Web 項(xiàng)目中振诬，我們使用的是 Styed-component蹭睡；
- 在 React native 項(xiàng)目中，我們使用 React native 自帶的
StyleSheet.create赶么； - 在小程序項(xiàng)目中棠笑，我們使用 Taro 開發(fā)，樣式方案是 Sass;
三種樣式的方案寫法各不相同禽绪，導(dǎo)致我們編寫樣式時(shí)特別痛苦：
- 開發(fā)體驗(yàn)差蓖救，開發(fā)同樣的界面，卻要不同的寫法印屁，需要不斷切換習(xí)慣和思維
- 工具鏈太廣太復(fù)雜循捺，Styled-component、Sass雄人、StyleSheet.create...
- 開發(fā)效率低下从橘，重復(fù)代碼特別多
- CSS 天生缺點(diǎn)多，可維護(hù)性差
后面础钠，我發(fā)現(xiàn)了 Tailwindcss恰力，一個(gè) utility 優(yōu)先(utility-first) 的 CSS 框架，在我的推動下旗吁，我們團(tuán)隊(duì)開始在 Web 項(xiàng)目中使用 Tailwindcss踩萎。一段時(shí)間后，我們發(fā)現(xiàn)開發(fā)體驗(yàn)很不錯(cuò)很钓，開發(fā)效率也很高香府，特別適合在我們這種需要高度定制界面的項(xiàng)目使用董栽。可惜的是企孩，Tailwindcss 無法直接在 React native锭碳、小程序等非 Web 項(xiàng)目使用。
我們團(tuán)隊(duì)的成員都喜歡 Tailwindcss 這種樣式寫法勿璃。所以我創(chuàng)建了 Fower擒抛，希望能統(tǒng)一了所有項(xiàng)目的樣式編寫方式。
和 Tailwindcss 類似补疑，我們也使用了 utility-first 的理念歧沪，但有 Fower 又有點(diǎn)不同，F(xiàn)ower 使用 Atomic style props 的方式編寫樣式癣丧，代碼如下：
<div toCenterY p-10 w-260 rounded-10 shadow>
<img circle-48 src="/img/jobs.jpg" />
<div ml-10>
<div textXL fontBold>Steve Jobs</div>
<span gray800>Co-founder of Apple Inc.</span>
</div>
</div>
核心理念
Fower 是 opinionated 的，我們基于以下理念創(chuàng)建了它：
utility-first栈妆，這種方式讓我們更快速地編寫樣式胁编，和其他 "utility-first" CSS 框架不同的是，F(xiàn)ower 使用 "Atomic style prop" 編寫樣式
Type safe鳞尔，我們團(tuán)隊(duì)是 TypeScript 重度使用用戶嬉橙，Type safe 帶來的智能提示，讓我們幾乎很少翻閱文檔寥假，并且在編寫代碼時(shí)不依賴任何編輯插件就有準(zhǔn)確的自動補(bǔ)全
Framework-agnostic市框，這是我們創(chuàng)建 Fower 的最主要原因之一，F(xiàn)ower 可以讓你用一致的寫法在 React糕韧、Vue枫振、React Native 編寫樣式
CSS in JS，我們討厭在獨(dú)立的 CSS 文件中編寫 CSS萤彩，純 CSS 有非常多缺點(diǎn)粪滤，如：無法訪問 JS 變量；容易產(chǎn)生樣式?jīng)_突雀扶；容易產(chǎn)生死代碼... 我們喜歡使用 JS (CSS in JS) 編寫樣式杖小，它更適合在組件化時(shí)代中使用。實(shí)際上愚墓，F(xiàn)ower 不僅僅是 CSS in JS予权，它也是 CSS in HTML。
一些很酷的特性
Fower 有非常多的特性浪册，如原子類扫腺、響應(yīng)式、偽類村象、主題斧账、設(shè)計(jì)系統(tǒng)谴返、CSS in JS...，我覺這些是 Fower 的基礎(chǔ)功能咧织，并不是特色功能嗓袱。
Fower 有幾個(gè)我認(rèn)為很酷的功能：
1. Layout Toolkit
如果要我在 Fower 中選一個(gè)最喜歡的特性，那毫無疑問是 Layout Toolkitd习绢。
Fower 提供了一個(gè)強(qiáng)大的基于 Flexdiv 的布局工具渠抹，通過調(diào)整布局的方向(Direction)和對齊(Alignment)，可以實(shí)現(xiàn)大部分的布局闪萄，使布局工作更輕松梧却。
相比傳統(tǒng)的 flex 布局，F(xiàn)ower 的布局更加抽象精簡败去，F(xiàn)ower 的布局抽象為 toCenter放航、toCenterX、toCenterY圆裕、toLeft广鳍、toTop、toRight吓妆、toBottom赊时、toBetween、toEvenly行拢、toAround 十種原子對齊方式祖秒，使用時(shí)你可以忘記傳統(tǒng) flex 布局中的主軸（main axis）和交叉軸（cross axis）的概念，你只需要有方向感即可舟奠。
使用方式如下：
<div toCenter bgGray100 square-200>
<div square-60 bgAmber400 rounded-8></div>
<div square-80 bgBlue400 rounded-8></div>
</div>
更詳細(xì)的使用方法請看文檔： Layout Toolkitd竭缝。
2. Predictable style
另外一個(gè)我個(gè)人很喜歡的特性的是 Predictable style。在傳統(tǒng)的 CSS 中沼瘫，我認(rèn)為樣式是不可預(yù)測的歌馍。為什么這么說？這里舉個(gè)例子晕鹊。
我們有如下的 CSS:
.red {
color: red;
}
.blue {
color: blue;
}
有如下的的 html, css 類名分別為 "red blue" 和 "blue red"：
<div>
<span className="red blue">Fower</span>
<span className="blue red">Fower</span>
</div>
你能確定文字的顏色嗎松却？不好確定，如果我們不翻看上面的 CSS 代碼溅话，你無法直接判斷文字的顏色晓锻，只能通過開發(fā)者工具調(diào)試得知。
在 Flower 中飞几，你可以輕易判斷下面文字的顏色：
<div>
<span red400 blue400> text will be color blue400 </span>
<span blue400 red400> text will be color red400 </span>
</div>
這有什么用呢砚哆？除了讓我們更容易判斷樣式結(jié)果，我覺的最有用的是：當(dāng)我們抽象出一個(gè)可復(fù)用的組件時(shí)屑墨，比如一個(gè)通用的 Button, 那調(diào)用方可以輕易的覆蓋組件默認(rèn)樣式躁锁，比如這樣類似的代碼 <Button bgRed300></Button> 可以安全的設(shè)置背景色纷铣。
更詳細(xì)的使用方法請看文檔：Predictable style。
3. 顏色助手
Fower 的另一個(gè)很酷的功能是顏色助手战转，您可以使用一些后綴來處理顏色搜立。
使用 --D{0-100} 這樣的后綴來加深一個(gè)顏色:
<div toEvenly toCenterY>
<div red300>normal</div>
<div red300--D40>darken</div>
<div color="#fff--D40">darken</div>
<div bgRed300 square-84></div>
<div bgRed300--D40 square-84></div>
<div border borderRed300 square-84></div>
<div border borderRed300--D40 square-84></div>
</div>
使用 --L{0-100} 后綴來變淺一個(gè)顏色：
<div toEvenly>
<div red500>normal</div>
<div red500--T40>transparentize</div>
<div color="#000--T40">transparentize</div>
<div bgRed500 square-84></div>
<div bgRed500--T40 square-84></div>
<div border borderRed300 square-84></div>
<div border borderRed300--T40 square-84></div>
</div>
使用 --T{0-100} 后綴來增加顏色的透明度：
<div toEvenly>
<div red500>normal</div>
<div red500--T40>transparentize</div>
<div color="#000--T40">transparentize</div>
<div bgRed500 square-84></div>
<div bgRed500--T40 square-84></div>
<div border borderRed300 square-84></div>
<div border borderRed300--T40 square-84></div>
</div>
使用 --O{0-100} 后綴來增加顏色的不透明度：
<div toEvenly>
<div color="rgba(0,0,0,0.4)">0.4</div>
<div color="rgba(0,0,0,0.4)--O40">Opacify to 0.6</div>
<div bg="rgba(0,0,0,0.4)" square-84></div>
<div bg="rgba(0,0,0,0.4)--O40" square-84></div>
<div border borderColor="rgba(0,0,0,0.4)" square-84></div>
<div border borderColor="rgba(0,0,0,0.4)--O40" square-84></div>
</div>
更詳細(xì)的使用方法請看文檔：Color helper。
4. 可組合的后綴
Fower 提供一些后綴來快速處理樣式, 如: --hover, --focus, --sm, --dark, --T{amount}...
Flower 的另一個(gè)很酷的功能是可組合的后綴槐秧。 您可以組合一些后綴啄踊，并且順序是任意的:
<div square-84 bgOrange300 bgOrange400--D10--hover--sm></div>
下面的代碼和上面是等價(jià)的：
<div square-84 bgOrange300 bgOrange400--hover--sm--D10></div>
最后
如果你想了解更多關(guān)于 Fower 的信息，你可以訪問項(xiàng)目網(wǎng)站和官方文檔刁标。
