遇到的问题和痛点
在我们平时写UI代码时, 经常要针对不同的层级写各种class名称, 每次需要想合理的命名也很头疼, 慢慢变懒就成了.items, .item, 然后不断的在Style样式中, 和UI元素中切换. 而Chakra的出现(虽然Tailwind CSS也可以), 恰恰解决了我的这个痛点, 不需要再将样式和元素分开来写, 直接在元素属性上描述即可, 同时也是一种和当前流行的Tailwind CSS, Windi CSS 一样的原子化样式解决方案.
实践
普通class 例子
比如原来需要这样来写
<div class="exam-btn">去考试</div>
.exam-btn {
font-size: 20px;
border-radius: 4px;
padding: 10px 4px;
}
现在可以直接通过 Chakra 的组件CBox 直接写
<c-box font-size="20px" border-radius="4px" px="4px" py="10px">去考试</c-box>
生成如下:
<div data-chakra-component="CBox" class="css-1htcojp">去考试</div>
.css-1htcojp {
font-size: 20px;
border-radius: 4px;
}
Sketch样式代码如下
通过Chakra 就可以无脑来写样式, 我专门写了插件, 通过给设计稿元素添加点击事件, 自动将样式解析转化为以下代码并复制到剪切板, 直接粘贴到代码中即可, 提高了开发速度.
<c-box font-family="PingFangSC-Regular" font-size="30px" color="#737373" text-align="justify" line-height="36px" font-weight="400"><c-box>
主观感受, 大家可以对比一下
主观上感觉Chakra比 Tailwind CSS, Windi CSS更好用, 比如
<div class="text-lg text-center font-bold mx-auto"></div>
<div class="text-[20px] text-center mx-auto" :class="[level == 1 ? 'font-bold': 'font-normal']"></div>
<c-box font-size="lg" text-align="center" font-weight="bold" mx="auto"></div>
<c-box font-size="20px" text-align="center" :font-weight="level == 1 ? 'bold': 'normal'" mx="auto"></div>
大家可以通过文档也许会找到自己的痛点的解决方案, 我现在在PC,H5新项目中, 都加了这种U框架, 开发效率有很大的提高.
以下是我写的一个工具的实现
通过分析Sketch 的数据, 并且对每个元素添加点击事件, 并自动生成Chakra 代码,包括嵌套层级, 我所做的就是点击,粘贴, 如果不合适再做相应的小的调整, 后续可能再把插件的功能再加强, 生成的更智能一些, 现在对布局的识别可能不太好, 后面我也会把这个插件的功能再写一篇文章分享.
<c-box background="#E5E5E5" border-radius="24px" pl="30px" pt="3px" pr="29px" pb="3px">
<c-box font-size="30px" color="#666666" letter-spacing="0.48px" text-align="center" font-weight="400">单选</c-box>
</c-box>
Chakra-UI 介绍
- Chakra UI内置Emotion,是CSS-IN-JS解决方案的集大成者
- 基于Styled-System
- 支持开箱即用的主题功能
- 默认支持白天和黑夜两种模式
- 拥有大量功能丰富且非常有用的组件
- 使响应式设计变得轻而易举
- 文档清晰而全面, 查找API更加容易
- 适用于构建用于展示的给用户的界面
缺点: Vue 版现在内置组件比较少
参考: Chakra UI官网 React Chakra UI Vue Chakra UI
