关于 Fower

承认吧,写 CSS 是一件痛苦的事情。

在我多年前端开发经历中,大部分人都为写 CSS 而感到痛苦,大部分前端开发者觉得写 CSS 很枯燥,大部分后端开发者觉得精通 CSS 很难。

CSS,甚至不能称之为一门编程语言,但它却庞大而复杂,有及其多的样式属性,而且新特性还在不多增加中。回想你学习并精通 CSS 的过程,除了要学习基本 padding、margin、color 等基础知识,你还要熟悉选择器 (熟悉全部高级选择器够你搞一阵了),CSS3 各种新特性 (从基本的阴影渐变到各种动画),用于布局控制的 flexbox 和 grid 等,新的 CSS 变量,还有旧时的浮动等黑科技...CSS 发展了 20 多年了,里面既有精华也有糟粕,要熟悉 CSS 的全貌,是一件非常费时的事情。最重要的是,对于大部分人,要完成界面的开发,只需使用 CSS 中的很小一部分样式属性。

Fower 是一个让你高效开发 UI 的样式工具库,目标是让你写 CSS 不再痛苦。

在 Fower 中,我们通过 ”原子属性“ 直接在 Markup 中编写样式,Fower 的提供的 ”原子属性“ 并不会支持所有 CSS 特性,它只是 CSS 的一个子集,只包含一些我们认为是 CSS 精华的部分(the good parts),通过这些原子属性,你可完成界面开发的大部分工作。

Fower 是框架无关 (framework-agnostic)的,支持 React、Vue、Angular、React Native、Taro 多个主流框架。

最简单例子#

首先看看使用 Fower 时,我们的代码是怎样写的?

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO
<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>

特性#

  • Atomic Props

    Fower 使用Atomic Props让样式原子化。 数十年来,前端开发的最佳实践是将 HTML,CSS 和 JS 分离,但是随着组件化时代的到来,我们应该重新思考什么是最佳实践。

  • Framework-agnostic,框架无关

    这是我们研发 Fower 重要动机(Motivation)之一,我们团队的产品同时需要支持 Web、App、小程序等平台,我们没找到可以跨框架的样式解决方案,为了团队能在不同框进行 UI 开发中使用统一的写法,我们创建了 Fower。

  • Type Safe,类型安全

    我们团队是 TypeScript 的深度使用者,夸张是到了离开 Type Safe 就不会写代码的地步。Fower 是完全类型安全的,特别是配合 JSX,开发体验会非常棒,类型提供很好的智能提示和文档,且不需借助特定的编辑器插件实现智能提示。

  • Less Code,更少的代码

    使用 Fower,同样的 UI,你可以使用更少的代码实现,特别是在 JSX 中,布尔类型的 props 值是可以省略的,让 Fower 实现了 "key as value" 的模式,让样式代码量大大减少。

  • Less CSS, More JS

    请逐渐忘记 CSS,我们希望 utility 能覆盖 80%以上常规场景,对于特殊场景比如复杂 CSS animation、CSS Transform,或者是小众场景比如 User Select 等,我们仍建议使用原生 CSS 解决

  • Programmable

    Fower 是一种 CSS in JS 解决方案,当你在构建 UI 时,本质上你是在写 JS,而不是在写 CSS,JS 比 CSS 更灵活,特别实在状态和样式结合的场景,Fower 能更加优雅的处理。

灵感#

Fower 的灵感借鉴了这些类库: