不用写CSS是真的爽

最近我在新项目中尝试了使用 UnoCSS，体验效果还不错。在项目开发过程中，不再需要频繁切换去编写 CSS 代码，像是少写了一门语言。之前我不太喜欢使用原子类 CSS 这类库，因为觉得这样会导致 HTML 代码冗余，而且打包后的代码量也会增加。但是在尝试之后，我发现这些缺点其实可以接受。尤其是考虑到 UnoCSS 的灵活性和按需生成，生成的 CSS 代码量大大减小。

关于 UnoCSS 的设计思想可以看下托尼老师的博文https://antfu.me/posts/reimagine-atomic-css-zh 。UnoCSS 针对各种框架和工具提供了集成，以 vite 配置为例。

安装：

npm install -D unocss

vite.config.ts

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [UnoCSS()],
})

创建一个uno.config.ts文件

import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'

export default defineConfig({
  // 添加默认预设。pnpm add -D @unocss/preset-uno
  presets: [presetUno()],
})

将virtual:uno.css添加到您的主入口文件：

import 'virtual:uno.css'

按照上面配置完成就可以开始写代码了，写法可以完全兼容 Tailwind CSS，也可以更加灵活，比如：

/* p-10px */
padding: 10px;

/* text-[--color] */
color: var(--color);

/* active:bg-orange */
class:hover {
  background: orange;
}

类名太多可能会记不住，推荐使用 VSCode 插件。

插件会带有提示，写起来还是比较轻松的。

弊端也是很明显，HTML 类名太多了，后续代码量越来越多会很难维护，而且打包出来的 JS 包也会变大。如果有一种方式可以把类名整合成一个类名就更完美了，不说还真有这样的 UI 框架，就是 Chakra UI，Chakra UI 是一个基于 React 的 UI 库，当然也有 Vue 的，就是感觉还不太完善。