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

子弋 等级 917 2 2

一年多没写过文章了,今天给大家介绍一个我断断续续花了半年开发的 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 的布局抽象为 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 的信息,你可以访问项目网站和官方文档。

收藏
评论区

相关推荐

《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
2. web前端开发分享-css,js进阶篇
2. web前端开发分享css,js进阶篇 一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
js + css实现点击 波纹效果
有时候我们为了增加用户体验,可能会有一些点击样式 类似框架中的haverclass 这里简单用 jscss 实现一个点击效果(类似水波纹) 大体思路 1.获取点击时 鼠标坐标(相对于父元素) 2.在当前点 创建 节点(设置对应的样式) 3.设置定时器,移除节点Ok js dom <div class"box" <button
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
有关CSS预编译、管理工具和网络安全的相关面试题
我经常会听到一些想入行前端的人问,前端开发需要学习哪些技术?其实,除了核心的HTML、CSS、JavaScript技术外,像CSS预编译、前端框架,如Vue,React、Node、Angular;代码管理工具,如git,代码编辑器,sublime text,还有测试,网络安全等相关技术也是需要会一些。当然要求可能不会那么高,但至少要懂一些。所有今天准备了一些
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢? 1:抽离javascriptHome.vue<template <div <div :style"{ padding: '24px', back
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
Fower: 一个可在 Vue 和 React 方便使用的 CSS in JS 库
一年多没写过文章了,今天给大家介绍一个我断断续续花了半年开发的 CSS 项目: . Fower 是什么?Fower 是一个让你高效开发 UI 的样式工具库,目标是让你写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utilityfirst)、类型安全(Type Safe)、CSS in JS,它非常注重开发体验,让你快速且开心的开发界面。
天哪!几行js代码就可以实现拳皇小游戏
前言今天,我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说,我们赶紧来看下如何实现吧!效果(非静止八神)分别按W、S、A、D键可实现位置移动,并且效果真实。源码html与css很简单,主要是js中有几点需要注意的。<!DOCTYPE html <html lang"en" <head  <meta charset"UTF8"  <title游
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持
前端性能优化
前端性能优化1、减少资源的请求次数和大小压缩合并 js 和 css 文件,减少 http 请求次数和请求资源的大小;在项目中使用 webpack glup 等打包编译工具 2、尽量使用字体图标或者 svg 图标代替传统的 png(jpg)图渲染更快,减少代码体积,且放大不会出现变形等3、使用图片懒加载目的是减少页面第一次加载的 http 请求次数,实现思路:

热门文章

最新文章