关于vue.js:Fower-一个可在-Vue-和-React-方便使用的-CSS-in-JS-库

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

Fower 是什么？

Fower 是一个让你高效开发 UI 的款式工具库，指标是让你写 CSS 不再苦楚。Fower 的外围特点是原子化(Atomic/utility-first)、类型平安(Type Safe)、CSS in JS，它十分重视开发体验，让你疾速且开心的开发界面。

Fower 是框架无关的，你能够在 React、Vue、React native、小程序等任何 JavaScript 我的项目中应用。

我的项目背景

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

• 在 Web 我的项目中，咱们应用的是 Styed-component；
• 在 React native 我的项目中，咱们应用 React native 自带的 StyleSheet.create；
• 在小程序我的项目中，咱们应用 Taro 开发，款式计划是 Sass;

三种款式的计划写法各不相同，导致咱们编写款式时特地苦楚：

• 开发体验差，开发同样的界面，却要不同的写法，须要一直切换习惯和思维
• 工具链太广太简单，Styled-component、Sass、StyleSheet.create…
• 开发效率低下，反复代码特地多
• CSS 天生毛病多，可维护性差

前面，我发现了 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 的，咱们基于以下理念创立了它：

• utility-first，这种形式让咱们更疾速地编写款式，和其余 “utility-first” CSS 框架不同的是，Fower 应用 “Atomic style prop” 编写款式
• Type safe，咱们团队是 TypeScript 重度应用用户，Type safe 带来的智能提醒，让咱们简直很少翻阅文档，并且在编写代码时不依赖任何编辑插件就有精确的主动补全
• Framework-agnostic，这是咱们创立 Fower 的最次要起因之一，Fower 能够让你用统一的写法在 React、Vue、React Native 编写款式
• CSS in JS，咱们厌恶在独立的 CSS 文件中编写 CSS，纯 CSS 有十分多毛病，如：无法访问 JS 变量；容易产生款式抵触；容易产生死代码 … 咱们喜爱应用 JS (CSS in JS) 编写款式，它更适宜在组件化时代中应用。实际上，Fower 不仅仅是 CSS in JS，它也是 CSS in HTML。

一些很酷的个性

Fower 有十分多的个性，如原子类、响应式、伪类、主题、设计零碎、CSS in JS…，我觉这些是 Fower 的根底性能，并不是特色性能。

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

1. Layout Toolkit

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

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

相比传统的 flex 布局，Fower 的布局更加形象精简，Fower 的布局形象为 toCenter、toCenterX、toCenterY、toLeft、toTop、toRight、toBottom、toBetween、toEvenly、toAround 十种原子对齐形式，应用时你能够遗记传统 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 的信息，你能够拜访我的项目网站和官网文档。

• 我的项目地址：(https://github.com/forsigner/…
• 我的项目文档：(https://fower.vercel.app)[htt…