前端开发新趋势：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中编写代码
button
可以通过以下方式自定义一个简单的 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
精彩内容
发表评论