一年多没写过文章了，今天给大家介绍一个我断断续续花了半年开发的 CSS 项目： Fower.

顺晟科技：

在 Flower 中，你可以轻易判断下面文字的颜色：

更详细的使用方法请看文档：Predictable style。

你能确定文字的颜色吗？不好确定，如果我们不翻看上面的 CSS 代码，你无法直接判断文字的颜色，只能通过开发者工具调试得知。

utility-first，这种方式让我们更快速地编写样式，和其他 “utility-first” CSS 框架不同的是，Fower 使用 “Atomic style prop” 编写样式

Type safe，我们团队是 TypeScript 重度使用用户，Type safe 带来的智能提示，让我们几乎很少翻阅文档，并且在编写代码时不依赖任何编辑插件就有准确的自动补全

Fower 提供了一个强大的基于 Flexdiv 的布局工具，通过调整布局的方向(Direction)和对齐(Alignment)，可以实现大部分的布局，使布局工作更轻松。

Flower 的另一个很酷的功能是可组合的后缀。 您可以组合一些后缀，并且顺序是任意的:

另外一个我个人很喜欢的特性的是 Predictable style。在传统的 CSS 中，我认为样式是不可预测的。为什么这么说？这里举个例子。

Fower 有非常多的特性，如原子类、响应式、伪类、主题、设计系统、CSS in JS…，我觉这些是 Fower 的基础功能，并不是特色功能。

CSS in JS，我们讨厌在独立的 CSS 文件中编写 CSS，纯 CSS 有非常多缺点，如：无法访问 JS 变量；容易产生样式冲突；容易产生死代码… 我们喜欢使用 JS (CSS in JS) 编写样式，它更适合在组件化时代中使用。实际上，Fower 不仅仅是 CSS in JS，它也是 CSS in HTML。

使用 --T{0-100} 后缀来增加颜色的透明度：

使用 --O{0-100} 后缀来增加颜色的不透明度：

如果你想了解更多关于 Fower 的信息，你可以访问项目网站和官方文档。

使用 --D{0-100} 这样的后缀来加深一个颜色:

Fower 是一个让你高效开发 UI 的样式工具库，目标是让你写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utility-first)、类型安全(Type Safe)、CSS in JS，它非常注重开发体验，让你快速且开心的开发界面。

和 Tailwindcss 类似，我们也使用了 utility-first 的理念，但有 Fower 又有点不同，Fower 使用 Atomic style props 的方式编写样式，代码如下：

使用 --L{0-100} 后缀来变浅一个颜色：

这有什么用呢？除了让我们更容易判断样式结果，我觉的最有用的是：当我们抽象出一个可复用的组件时，比如一个通用的 Button, 那调用方可以轻易的覆盖组件默认样式，比如这样类似的代码 <Button bgRed300></Button> 可以安全的设置背景色。

后面，我发现了 Tailwindcss，一个 utility 优先(utility-first) 的 CSS 框架，在我的推动下，我们团队开始在 Web 项目中使用 Tailwindcss。一段时间后，我们发现开发体验很不错，开发效率也很高，特别适合在我们这种需要高度定制界面的项目使用。可惜的是，Tailwindcss 无法直接在 React native、小程序等非 Web 项目使用。

更详细的使用方法请看文档：Color helper。

Fower 的另一个很酷的功能是颜色助手，您可以使用一些后缀来处理颜色。

Fower 有几个我认为很酷的功能：

如果要我在 Fower 中选一个最喜欢的特性，那毫无疑问是 Layout Toolkitd。

Fower 是 opinionated 的，我们基于以下理念创建了它：

Fower 是框架无关的，你可以在 React、Vue、React native、小程序等任何 JavaScript 项目中使用。

Framework-agnostic，这是我们创建 Fower 的最主要原因之一，Fower 可以让你用一致的写法在 React、Vue、React Native 编写样式

更详细的使用方法请看文档： Layout Toolkitd。

我们团队的成员都喜欢 Tailwindcss 这种样式写法。所以我创建了 Fower，希望能统一了所有项目的样式编写方式。

我们有如下的 CSS:

三种样式的方案写法各不相同，导致我们编写样式时特别痛苦：

Fower 提供一些后缀来快速处理样式, 如: --hover, --focus, --sm, --dark, --T{amount}…

使用方式如下：

下面的代码和上面是等价的：

一年前，我所在的团队同时在开发 Web、React native、小程序项目。在这三类项目中，我们使用了各不相同的样式方案：

有如下的的 html, css 类名分别为 “red blue” 和 “blue red”：

相比传统的 flex 布局，Fower 的布局更加抽象精简，Fower 的布局抽象为 toCenter、toCenterX、toCenterY、toLeft、toTop、toRight、toBottom、toBetween、toEvenly、toAround 十种原子对齐方式，使用时你可以忘记传统 flex 布局中的主轴（main axis）和交叉轴（cross axis）的概念，你只需要有方向感即可。