前端开发新趋势：UnoCSS快速入门
- UnoCSS
- 一、UnoCSS简介
- 二、UnoCSS解决问题
- 三、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 有一些区别和特点：
- 设计理念： UnoCSS 的设计理念是提供一个即时、按需的原子级 CSS 引擎。它专注于轻量化和高性能，并使用原子类的方式来构建页面样式。相比之下，Tailwind CSS 提供了更全面和丰富的工具集，以便于快速开发和定制化。它使用了一组预定义的类，通过组合这些类来构建页面样式。
- 文件大小和加载性能： UnoCSS 生成的 CSS 文件相对较小，因为它仅包含实际使用的样式属性。这可以减少网络传输和运行时的样式计算，从而提高页面加载性能。而 Tailwind CSS 的 CSS 文件较大，因为它提供了大量的预定义类，以满足各种常见样式需求。
- 学习曲线和使用方式： UnoCSS 使用原子类的方式来定义样式，需要熟悉其命名规则和使用方法，特别适合熟悉原子类概念的开发者。相比之下，Tailwind CSS 的类命名直观且易于理解，上手较快。它也提供了丰富的文档和示例，帮助开发者更快地上手。
- 定制性和灵活性： 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
- 安装完成
- 修改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()],
})
]
})
- 修改main.js文件
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'uno.css' // focus code
createApp(App).mount('#app')
- 在app.vue中编写代码
<script setup>
</script>
<template>
<button class="bg-blue w-80 h-10 ml-10 m-1">
button
</button>
</template>
<style scoped>
</style>
- 可以通过以下方式自定义一个简单的 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' }] // 这里可以自定义
]
}),
],
});
-
可以通过配置使用Webpack打包Unocss，这里就不详细展开啦
-
使用风险：UnoCSS 仍处于实验阶段，但由于其精简的设计，生成的结果已经非常可靠了。需要注意的一点是，API 还没有最终定案，虽然我们会遵循 semver 的进行版本发布，但是还请为破坏性改动做好准备。
四、好文推荐
- 重新构想原子化 CSS (antfu.me)
- 从 Tailwind CSS 到 UnoCSS —— 原子化真的是前端CSS的救星吗
- 来试试antfu大佬的原子化css构想成果——UnoCSS
