UnoCSS快速入门

---

UnoCSS

一、UnoCSS简介

• UnoCSS 是一个即时、按需的原子级 CSS 引擎。它专注于提供轻量化、高性能的 CSS 解决方案。
• “Instant On-demand” 表示 UnoCSS 的加载和渲染速度非常快，可以立即进行使用。它不需要预先编译，使得样式可以在需要时动态地生成。
• “Atomic CSS Engine” 表示 UnoCSS 使用原子级 CSS 样式的概念。原子级 CSS 是一种通过将样式属性定义为独立的类来构建页面的方法。每个类都只包含一项或几项样式属性，可以在组件中灵活地组合和应用这些类，以实现细粒度的样式控制。
• UnoCSS 的目标是通过仅传递实际使用的样式属性，减小生成的 CSS 文件的体积。这样可以优化页面的加载速度，并减少不必要的网络传输和运行时的样式计算。
• 总的来说，UnoCSS 是一个即时、按需的原子级 CSS 引擎，旨在提供快速、高性能的原子级 CSS 解决方案。

---

二、UnoCSS解决问题

• UI 库 Bootstrap 很早就在提供大量原子化 CSS 工具类。不过在应用开发中，由于原子化 CSS 自身的劣势——原子类的编写缺少提示、原子类的定义使 CSS 最终产物膨胀、原子类的大量堆叠降低 html 的可读性，语义化 CSS 逐渐成为了主流，原子 CSS 慢慢被边缘化，成为一种辅助的手段。

• 现代的原子化 CSS 方案——Tailwind CSS、Windi CSS、UnoCSS，之所以将原子化 CSS 方案再度推向高潮，是因为其解决了上述的三大痛点：

  • 它们都推出了 VSCode 插件，为编写原子类提供了充分的提示与自动补全。
  • 它们都在构建阶段扫描代码，能够按照代码中的实际使用情况生成工具类，解决了原子类使 CSS 产物膨胀问题。
  • 针对原子类堆叠降低可读性的问题，提供了 @apply 语法支持在 CSS 中对多个原子类进行合并，与语义化 CSS 实现了很好的配合。

• UnoCSS 和 Tailwind CSS 有一些区别和特点：

  1. 设计理念： UnoCSS 的设计理念是提供一个即时、按需的原子级 CSS 引擎。它专注于轻量化和高性能，并使用原子类的方式来构建页面样式。相比之下，Tailwind CSS 提供了更全面和丰富的工具集，以便于快速开发和定制化。它使用了一组预定义的类，通过组合这些类来构建页面样式。
  2. 文件大小和加载性能： UnoCSS 生成的 CSS 文件相对较小，因为它仅包含实际使用的样式属性。这可以减少网络传输和运行时的样式计算，从而提高页面加载性能。而 Tailwind CSS 的 CSS 文件较大，因为它提供了大量的预定义类，以满足各种常见样式需求。
  3. 学习曲线和使用方式： UnoCSS 使用原子类的方式来定义样式，需要熟悉其命名规则和使用方法，特别适合熟悉原子类概念的开发者。相比之下，Tailwind CSS 的类命名直观且易于理解，上手较快。它也提供了丰富的文档和示例，帮助开发者更快地上手。
  4. 定制性和灵活性： Tailwind CSS 提供了大量的预定义类，使得样式定制和扩展非常方便。开发者可以通过配置文件自定义主题、添加新的类或修改现有类。UnoCSS 则更加注重即时、按需生成样式，定制性较弱。

• UnoCSS 并非要替代 Tailwind CSS 而是从另一个角度使原子化CSS在业务中融合的更完美

按需生成

• 传统的方式不仅会消耗不必要的资源（生成了但未使用），甚至有时更是无法满足你的需求，因为总会有部分需求无法包含在内。

• 通过调换 “生成” 和 “扫描” 的顺序，“按需” 会为你节省浪费的计算开销和传输成本，同时可以灵活地实现预生成无法实现的动态需求。另外，这种方法可以同时在开发和生产中使用，提供了一致的开发体验，使得 HMR (Hot Module Replacement, 热更新) 更加高效。
• Tailwind 的 API 和插件系统沿用了旧的思维方式进行设计，并不能适应新的按需方式。其核心工具是在生成器中锻造出来的，而且其定制化功能相当有限。(Tailwind 3.0也是按需引入啦)

性能

• 从结果来看，UnoCSS 可以比 Tailwind 的 JIT 引擎快 200 倍！说实话，在按需生成的情况下，Windi 和 Tailwind JIT 都已经算是超快了，UnoCSS 的性能提升感知度可能没有那么高。然而，几乎为零的开销意味着你可以将 UnoCSS 整合到你现有的项目中，作为一个增量解决方案与其他框架一同协作，而不需要担心性能损耗。

• Pure CSS icons

  • 纯css图标，使用 Iconify作为图标的数据源

• Attributify Mode

  • 特有的属性模式

• Variant Groups

  • 属性组的写法转换

• Shortcuts

  • 快捷写法

• Tagify

  • 标记

• Web fonts

  • 网页字体

• CDN Runtime

  • CDN运行时

• Inspector

  • 检查

---

三、UnoCSS实践

• Integrations (unocss.dev)
• 首先创建好项目，然后安装unocss(顺便安装好unocss插件)：
• 

# 安装unocss和三个预设，第一个是工具类预设，第二个是属性化模式支持，第三个是icon支持
npm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons
# or
yarn add -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons
# or
pnpm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons
1
2
3
4
5
6

• 安装完成

• 修改vite.config.js文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入Unocss
import Unocss from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from 'unocss'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({ // 使用Unocss
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons()],
    })
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 修改main.js文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'uno.css' // focus code

createApp(App).mount('#app')
1
2
3
4
5
6

• 在app.vue中编写代码

1
2
3
4
5
6
7
8
9
10
11

• 可以通过以下方式自定义一个简单的 UnoCSS 静态规则

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Unocss from "unocss/vite";
import { presetUno, presetAttributify, presetIcons } from "unocss";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      presets: [presetUno(), presetAttributify(), presetIcons()],
      rules:[
        ['m-1', { margin: '1px' }] // 这里可以自定义
      ]
    }),
  ],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 可以通过配置使用Webpack打包Unocss，这里就不详细展开啦

• 使用风险：UnoCSS 仍处于实验阶段，但由于其精简的设计，生成的结果已经非常可靠了。需要注意的一点是，API 还没有最终定案，虽然我们会遵循 semver 的进行版本发布，但是还请为破坏性改动做好准备。

---

四、好文推荐

• 重新构想原子化 CSS (antfu.me)
• 从 Tailwind CSS 到 UnoCSS —— 原子化真的是前端CSS的救星吗
• 来试试antfu大佬的原子化css构想成果——UnoCSS