原子化CSS [UnoCSS]

官方文档：UnoCSS 官网

1. 核心概念

UnoCSS 是一个即时原子化 CSS 引擎，由 Anthony Fu（Vite 核心团队成员）开发，旨在提供高性能、高度灵活的样式解决方案。与传统框架不同，UnoCSS 不预设工具类，而是通过规则（Rules）和预设（Presets）动态生成原子类，实现按需加载和极致的可定制性。

核心特点：

• 按需生成：仅生成实际使用的 CSS，显著减少文件体积（如 Tailwind CSS 生成数 MB 的 CSS，而 UnoCSS 按需生成仅需几 KB）。
• 高性能：无解析、无抽象语法树（AST），速度比 Tailwind JIT 快 5 倍。
• 零依赖：仅需 6kb（压缩后），支持浏览器端运行。
• 高度灵活：支持自定义规则、快捷方式、属性模式、图标集成等。

2. 安装与配置

基础集成（以 Vite + Vue3 为例）：

1. 安装依赖：

   pnpm add -D unocss       # pnpm
   yarn add -D unocss       # yarn
   npm install -D unocss    # npm
   bun add -D unocss        # bun

2. Vite 配置：

   // vite.config.ts
   import { defineConfig } from 'vite'
   import UnoCSS from 'unocss/vite'
   
   export default defineConfig({
     plugins: [UnoCSS()]
   })

3. UnoCSS 配置文件：

   // uno.config.ts
   import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
   
   export default defineConfig({
     presets: [
       presetUno(),        // 基础工具类预设
       presetAttributify(), // 属性化模式支持
       presetIcons()       // 图标集成
     ],
     shortcuts: {
       'flex-center': 'flex justify-center items-center', // 快捷方式
     }
   })

4. 入口文件引入：

   // main.ts
   import 'virtual:uno.css'  // 核心样式
   import '@unocss/reset/tailwind.css' // 重置样式

常见问题：

• 单位问题：默认 1单位 = 0.25rem（即 4px），可通过修改 html { font-size: 4px } 实现 1单位 = 1px。
• Vue 别名配置：若遇到模板编译错误，需在 vite.config.ts 中添加 vue.esm-bundler.js 别名。

3. 核心功能与原子类表

以下为常见 CSS 属性对应的 UnoCSS 原子类示例（基于 presetUno）：

特殊功能示例：

• 动态值：.w-[200px] → width: 200px。

• 属性模式：

  <button bg="blue-400 hover:blue-500" text="sm white">Click</button>

• 图标集成：安装 @iconify/json 后，使用 .i-{图标集}-{图标名} 类名直接渲染图标。

4. 优缺点分析

优点：

• 极致性能：按需生成 + JIT 模式，构建速度与体积优于 Tailwind CSS。
• 高度自由：可通过规则（Rules）和预设（Presets）自定义任何样式。
• 生态丰富：支持图标、深色模式、响应式断点等扩展功能。

缺点：

• 学习成本：需熟悉命名规则和预设配置。
• 类名冗长：HTML 中需组合多个类（可通过快捷方式优化）。