我正在参与掘金创作者训练营第5期， 点击了解活动详情

介绍

今天介绍一个CSS开发利器 UnoCSS , 是一个具有高性能且极具灵活性的即时原子化 CSS 引擎，具有按需加载的特性，相信使用过 Tailwind CSS，Windi CSS ，等CSS框架的同学对CSS原子化这个概念都不会陌生，原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

对比

unocss 的作者是Anthony Fu，是 Vite 团队的成员，也是 Vitesse （Vite 社区最受欢迎的起手模板之一）的作者。Anthony Fu 在开发Vitesse是使用 Tailwind CSS 作为 Vitesse 的默认 UI 框架。但由于 Tailwind 生成了数 MB 的 CSS，使得加载与更新 CSS 成为了整个 Vite 应用的性能瓶颈。后来作者发现了Windi CSS，相比于Tailwind CSS 具有按需加载，零依赖等特性。在CSS文件打包的大小与加载速度上得到了很大的提升。

使用

UnoCSS 是一个引擎，而非一款框架，因为它并未提供核心工具类，所有功能可以通过预设和内联配置提供。

创建一个自定义规则：

import UnocssPlugin from '@unocss/vite'

export default {
  plugins: [
    UnocssPlugin({
       rules: [
          ['m-1', { margin: '0.25rem' }]
        ]
    })
  ]
}

当在用户代码库中检测到时，就会生成如下 CSS：m-1

.m-1 { margin: 0.25rem; }

动态化，将匹配器修改为正则表达式，将主体改为一个函数：

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, (match) => ({ padding: `${match[1] / 4}rem` })],
]

例如，当你使用：

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

生成相应的 CSS：

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

以上就是使用UnoCSS 生成原子化css框架的一些用例。

属性模式

以上的用例看起来跟Tailwind 和其他原子化框架的使用差不多，使用这类原子化框架会导致类名很长，比如：

<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>

难以阅读，使用UnoCSS 能将这些类名更好的按更好的按类型进行组织，你可以这样书写上面的代码：

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

同时也避免了重复输入相同前缀。

甚至可以通过简单的设置，加入对无值属性的支持。在性能上，从作者的测试结果上看，UnoCSS 可以比 Tailwind 的 JIT 引擎快 200 倍！虽然正式API还没有确定，但是不妨碍我们提前学起来。卷就完事了。

参考：

github.com/unocss/unoc…

uno.antfu.me/play/

作者的B站主页 space.bilibili.com/668380

关于作者的采访：www.bilibili.com/video/BV1eS…

新一代原子化引擎 unocss

介绍

对比

使用

属性模式