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

2021-04-23 10:40:37 +08:00
forsigner  forsigner

今天给大家介绍一个我断断续续花了半年开发的 CSS 项目: Fower.

Fower 是什么?

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

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

项目背景

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

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

后面,我发现了 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 的,我们基于以下理念创建了它:

一些很酷的特性

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

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

1. Layout Toolkit

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

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

相比传统的 flex 布局,Fower 的布局更加抽象精简,Fower 的布局抽象为 toCentertoCenterXtoCenterYtoLefttoToptoRighttoBottomtoBetweentoEvenlytoAround 十种原子对齐方式,使用时你可以忘记传统 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 的信息,你可以访问项目网站和官方文档。

4548 次点击
所在节点    程序员
67 条回复
forsigner
2021-04-23 19:10:59 +08:00
@hewelzei [国内的前端开发人员好像不是很注重如何优雅编写样式] 这个赞同,不知为啥,国内很多前端都理所当然的认为“关注点分离”就是对的,而且国内 CSS in JS 也用得不多,可能国内真的太多前端是非科班转过了的
narmgalaxy
2021-04-23 20:18:33 +08:00
@forsigner svelte 可用吗
huijiewei
2021-04-23 20:45:58 +08:00
感谢分享

最近在关注可以生成 atom css 的 CSS-IN-JS 库

https://github.com/seek-oss/vanilla-extract
cereschen
2021-04-23 21:00:17 +08:00
不错 抓住了国外框架不考虑小程序的痛点 应该可以收割一批用户
3dwelcome
2021-04-23 21:08:27 +08:00
@forsigner "有计划做,做个 webpack-loader 就可以"

我说的 JIT, 是类似 vue.js ,前端包含一个 js 后,页面载入前,前端能动态编译 v-if, bgOrange300 之类的,到对应的 js/css 代码。
和 webpack 没关系,总觉得我们聊的不是一个 Just In Time Compiler 。
yolio2003
2021-04-23 22:03:28 +08:00
tailwind 刚支持了动态参数和生成呢,比不了的,优势剩下的是 类型 和 RN 兼容
yolio2003
2021-04-23 22:09:12 +08:00
刚好查了不少这块知识

@3dwelcome 你可以看看 https://twind.dev/
@forsigner 你不会是和 https://github.com/windicss/ 有啥关系吧
tailwind 既然官方支持动态了,是不是基于他做一个类型和 RN 的扩展支持受众更广呀
不过还是想说加油!
yolio2003
2021-04-23 22:43:43 +08:00
@huijiewei 多谢分享~
oop99
2021-04-23 23:25:49 +08:00
Mark 一下感觉不错,有机会试用再提意见
ShareManT
2021-04-23 23:35:18 +08:00
楼主思路不错。不过楼上好多人提到 tailwind 不香的地方可以看看 windicss,都有弥补、
hewelzei
2021-04-24 07:48:58 +08:00
@forsigner 国内是有好几个好用的 UI 组件库,像 antd, element ui 之类的,但是却少有 styled-components, emotion.js, stylable 之类的能改变样式编写方式的库。
forsigner
2021-04-24 08:51:35 +08:00
@narmgalaxy 这两天支持一下
forsigner
2021-04-24 08:53:02 +08:00
@huijiewei 这种单纯是为了 atomic,不把开发体验放在重要位置,不看好
forsigner
2021-04-24 08:58:06 +08:00
@3dwelcome 我我以为你说的是 zero-runtime, 本来 fower 本来就是不需要预编译的,它是 js 动态生成样式的,可以说本来就是 Just In Time
forsigner
2021-04-24 08:58:35 +08:00
@oop99 欢迎使用
forsigner
2021-04-24 09:00:44 +08:00
@ShareManT windicss 也不错,不过它还是纯 css 方案,fower 是 css in js 方案,看各自喜好吧
forsigner
2021-04-24 09:02:11 +08:00
@hewelzei 是的,antd, element 是更上层业务,不能改变样式编写方式
xiqingongzi
2021-04-24 12:08:41 +08:00
@forsigner 是的
FightPig
2021-04-24 16:43:29 +08:00
@forsigner tailwindcss 新版已经支持 p-[value] 随意写了
FightPig
2021-04-24 16:44:30 +08:00
@ShareManT tailwind 新版的 jit 感觉就是和 windicss 一个意思,windicss 作者还在推特上说起这事

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/772656

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX