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://github.com/forsigner/fower]
• 项目文档：( https://fower.vercel.app)[https://fower.vercel.app]