UnoCSS_一个即时的原子化 CSS 引擎

Web前端开发网

fly63.com

首页资源工具文章教程栏目

UnoCSS

网站地址:https://unocss.dev/

GitHub:https://github.com/unocss/unocss

网站描述:一个即时的原子化 CSS 引擎

访问官网

GitHub

Unocss 是一个即时的原子化 CSS 引擎，旨在灵活和可扩展。核心是不拘一格的，所有的 CSS 工具类都是通过预设提供的。

概念-原子化CSS

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

听起来厉害，但实现的最终方式超级简单，核心就是预置一大堆 class 样式，尽量将这些 class 样式简单化、单一化，在开发过程中，可以直接在 dom 中写预置好的 class 名快速实现样式，而不需要每次写简单枯燥大量的 css 样式，如下代码所示：

先预置一组class列表

.m-10 { margin: 10px; }
.p-5 { padding: 5px; }
.text-red { color: red; }
 // 无数个....

编码时在dom中直接写class名，快速实现样式

<div>
  测试dom
</div>

而预置的class列表中的样式，有着一定的规律，开发者可以通过学习快速掌握，利用多个class在dom中的组合快速实现效果

UnoCSS 做了哪些事

按 UnoCSS 作者的说法，UnoCSS 并非要替代 Tailwind CSS 而是从另一个角度使原子化CSS在业务中融合的更完美。

UnoCSS 作者是 Vite 团队成员，我觉得正是因为他作为 Vite 的开发者，对于工程化构建具有很高的敏感度，所以才能创造出 UnoCSS 将原子化的CSS与前端工程融合到极致。

那么 UnoCSS 做了哪些事呢：

1、按需生成

生成业务真正使用到的 class ，同时在开发和生产环境使用

对比 Tailwind CSS 只在生产环节清除无引用代码，UnoCSS 在开发环节也通过文件监听按需传输，获得更快地性能（虽然已经很快了，但再快一点总归是个提升嘛）

传统的方式

2、极具灵活性

UnoCSS 对自己定位是一个 CSS 引擎而非一个框架，所以它与 Tailwind CSS 应该是包含关系，UnoCSS 作为规则的制定者，而 Tailwind CSS 可以作为其中的一组 preset

import UnocssPlugin from '@unocss/vite'
import PresetTachyons from '@unocss/preset-tachyons'
import PresetBootstrap from '@unocss/preset-bootstrap'
import PresetTailwind from '@unocss/preset-tailwind'
import PresetWindi from '@unocss/preset-windi'
import PresetAntfu from '@antfu/oh-my-cool-unocss-preset'

export default {
  plugins: [
    UnocssPlugin({
      presets: [
        // PresetTachyons,
        PresetBootstrap,
        // PresetTailwind,
        // PresetWindi,
        // PresetAntfu
        // 选择其中一个...或多个！
      ]
    })
  ]
}

属性化书写 class 名

// 将冗长的 calss 按类型区分，更方便阅读理解
<button>
  Button
</button>

// 改变为
<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 提供更加灵活的静态&动态匹配规则。

编译进一步优化（比如不再解析AST），生产构建速度再度提升。

UnoCSS 等于是做了个更上层的引擎，以后再有新的原子化CSS框架也可以兼容进来了，省得你有选择困难症。