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…