Fower: 一個可在 Vue 和 React 方便使用的 CSS in JS 庫

一年多沒寫過文章了，今天給你們介紹一個我斷斷續續花了半年開發的 CSS 項目： Fower.

Fower 是什麼？

Fower 是一個讓你高效開發 UI 的樣式工具庫，目標是讓你寫 CSS 再也不痛苦。Fower 的核心特色是原子化(Atomic/utility-first)、類型安全(Type Safe)、CSS in JS，它很是注重開發體驗，讓你快速且開心的開發界面。

Fower 是框架無關的，你能夠在 React、Vue、React native、小程序等任何 JavaScript 項目中使用。

項目背景

一年前，我所在的團隊同時在開發 Web、React native、小程序項目。在這三類項目中，咱們使用了各不相同的樣式方案：

• 在 Web 項目中，咱們使用的是 Styed-component；
• 在 React native 項目中，咱們使用 React native 自帶的 StyleSheet.create；
• 在小程序項目中，咱們使用 Taro 開發，樣式方案是 Sass;

三種樣式的方案寫法各不相同，致使咱們編寫樣式時特別痛苦：

• 開發體驗差，開發一樣的界面，卻要不一樣的寫法，須要不斷切換習慣和思惟
• 工具鏈太廣太複雜，Styled-component、Sass、StyleSheet.create...
• 開發效率低下，重複代碼特別多
• CSS 天生缺點多，可維護性差

後面，我發現了 Tailwindcss，一個 utility 優先(utility-first) 的 CSS 框架，在個人推進下，咱們團隊開始在 Web 項目中使用 Tailwindcss。一段時間後，咱們發現開發體驗很不錯，開發效率也很高，特別適合在咱們這種須要高度定製界面的項目使用。惋惜的是，Tailwindcss 沒法直接在 React native、小程序等非 Web 項目使用。

咱們團隊的成員都喜歡 Tailwindcss 這種樣式寫法。因此我建立了 Fower，但願能統一了全部項目的樣式編寫方式。

和 Tailwindcss 相似，咱們也使用了 utility-first 的理念，但有 Fower 又有點不一樣，Fower 使用 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 的，咱們基於如下理念建立了它：

• utility-first，這種方式讓咱們更快速地編寫樣式，和其餘 "utility-first" CSS 框架不一樣的是，Fower 使用 "Atomic style prop" 編寫樣式

• Type safe，咱們團隊是 TypeScript 重度使用用戶，Type safe 帶來的智能提示，讓咱們幾乎不多翻閱文檔，而且在編寫代碼時不依賴任何編輯插件就有準確的自動補全

• Framework-agnostic，這是咱們建立 Fower 的最主要緣由之一，Fower 可讓你用一致的寫法在 React、Vue、React Native 編寫樣式

• CSS in JS，咱們討厭在獨立的 CSS 文件中編寫 CSS，純 CSS 有很是多缺點，如：沒法訪問 JS 變量；容易產生樣式衝突；容易產生死代碼... 咱們喜歡使用 JS (CSS in JS) 編寫樣式，它更適合在組件化時代中使用。實際上，Fower 不只僅是 CSS in JS，它也是 CSS in HTML。

一些很酷的特性

Fower 有很是多的特性，如原子類、響應式、僞類、主題、設計系統、CSS in JS...，我覺這些是 Fower 的基礎功能，並非特點功能。

Fower 有幾個我認爲很酷的功能：

1. Layout Toolkit

若是要我在 Fower 中選一個最喜歡的特性，那毫無疑問是 Layout Toolkitd。

Fower 提供了一個強大的基於 Flexdiv 的佈局工具，經過調整佈局的方向(Direction)和對齊(Alignment)，能夠實現大部分的佈局，使佈局工做更輕鬆。

相比傳統的 flex 佈局，Fower 的佈局更加抽象精簡，Fower 的佈局抽象爲 toCenter、toCenterX、toCenterY、toLeft、toTop、toRight、toBottom、toBetween、toEvenly、toAround 十種原子對齊方式，使用時你能夠忘記傳統 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>
複製代碼

更詳細的使用方法請看文檔： Layout Toolkitd。

2. Predictable style

另一個我我的很喜歡的特性的是 Predictable style。在傳統的 CSS 中，我認爲樣式是不可預測的。爲何這麼說？這裏舉個例子。

咱們有以下的 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 代碼，你沒法直接判斷文字的顏色，只能經過開發者工具調試得知。

在 Flower 中，你能夠輕易判斷下面文字的顏色：

<div>
  <span red400 blue400> text will be color blue400 </span>
  <span blue400 red400> text will be color red400 </span>
</div>
複製代碼

這有什麼用呢？除了讓咱們更容易判斷樣式結果，我覺的最有用的是：當咱們抽象出一個可複用的組件時，好比一個通用的 Button, 那調用方能夠輕易的覆蓋組件默認樣式，好比這樣相似的代碼 <Button bgRed300></Button> 能夠安全的設置背景色。

更詳細的使用方法請看文檔：Predictable style。

3. 顏色助手

Fower 的另外一個很酷的功能是顏色助手，您可使用一些後綴來處理顏色。

使用 --D{0-100} 這樣的後綴來加深一個顏色:

<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} 後綴來變淺一個顏色：

<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>
複製代碼

更詳細的使用方法請看文檔：Color helper。

4. 可組合的後綴

Fower 提供一些後綴來快速處理樣式, 如: --hover, --focus, --sm, --dark, --T{amount}...

Flower 的另外一個很酷的功能是可組合的後綴。 您能夠組合一些後綴，而且順序是任意的:

<div square-84 bgOrange300 bgOrange400--D10--hover--sm></div>
複製代碼

下面的代碼和上面是等價的：

<div square-84 bgOrange300 bgOrange400--hover--sm--D10></div>
複製代碼

最後

若是你想了解更多關於 Fower 的信息，你能夠訪問項目網站和官方文檔。

• 項目地址： (github.com/forsigner/f…
• 項目文檔：(fower.vercel.app)[https://fower.verc…