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

Edit this page