一、 前言

我的上一篇文章我学到了新概念，也就是“原子化CSS”的概念，它与我们团队正在推进的前端CBB（公共基础模块）可能很契合，我开始我的调研工作。

一开始收集到的是Tailwind CSS，也就出现了我的上一篇文章《浅尝Tailwind CSS》，后来发现了Anthony Fu 大佬，又知道了Windi CSS以及这次要尝试的Unocss。

二、为什么会出现 Unocss

Anthony Fu 大佬在自己的文章里《重新构想原子化 CSS》，讲到：

在正式开始前，先来聊聊背景。如果你还不认识我，我叫 Anthony Fu，是 Vite 团队的成员，也是 Vitesse (Vite 社区最受欢迎的起手模板之一) 的作者。我享受原子化 CSS 带来的快速开发体验，而因此选择了 Tailwind CSS 作为 Vitesse 的默认 UI 框架。虽然 Vite 较 Webpack 等工具相比，在加载速度上有了大幅提升，但由于 Tailwind 生成了数 MB 的 CSS，使得加载与更新 CSS 成为了整个 Vite 应用的性能瓶颈。我曾以为这是使用为了原子式 CSS 的一种权衡，直到我发现了 Windi CSS。

重要的原因还是，这个Tailwind CSS拖慢了Vite，后来觉得无论是Tailwind CSS，还是Windi CSS 都有一些问题， 这里大家可以看一下大佬的原文：痛痒

三、简易Demo

// 先创建个项目
pnpm create vite unocss-demo -- --template vue

// 安装包
// 安装unocss和三个预设，第一个是工具类预设，第二个是属性化模式支持，第三个是icon支持
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')

vscode 安装插件：

删除了模板里多余代码，开始使用Unocss。

从一个button开始吧：

<script setup>
</script>

<template>
  <button>
    我是个按钮
  </button>
</template>

<style scoped>
</style>

增加一些样式：

<script setup></script>

<template>
  <button class="bg-cyan w-100 ml-10 m-1">我是个按钮</button>
</template>

<style scoped></style>

明显的可以看到，比如m-1代表的就是 {margin: 0.25rem}，也就是默认的预设值。

如果你安装了vscode插件，鼠标移动到这几个class上就能看到：

你甚至可以这么写：

<script setup></script>

<template>
  <button bg-cyan w-100 ml-10 m-1>我是个按钮</button>
</template>

<style scoped></style>

效果完全一样，差异的是，一个是生效class，一个是属性生效：

配置rules：

// 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' }] // 这里可以自定义
      ]
    }),
  ],
});

我们覆盖了一个m-1，默认的是{margin: 0.25rem}，现在改成了{margin:1xp}，看看效果：

我们设定的rule生效了。

思考

以下观点，仅代表我目前所处的环境和认知。

直接放开，让团队无限制去写，我觉得不行，需要规范先行。

1. 结合团队、设计部门先形成一套工具类预设；
2. 组件优先，封装组件建议使用，自己的组件样式交给组件自己维护；
3. 还是要结合团队现状去考虑，不能为了一个人爽，要为了所有人爽（至少不不爽😆）

后面我可能还是会再去看看Tailwind CSS，毕竟Unocss还是试验阶段：

酒浆！

欢迎大家关注我的公众号：王大锤学前端

拜拜各位！