关于 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 () ^
<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 的灵感借鉴了这些类库: