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 的信息，你可以访问项目网站和官方文档。

项目地址： https://github.com/forsigner/fower
项目文档：https://fower.vercel.app