CSS 樣式太多，重復寫

在學習 UnoCSS 之前，我提出幾個問題：

你是否有過寫完了 HTML 之后，跳轉到 style 寫 CSS 這樣來回跳轉的痛苦？
你是否有過不知道如何給節點取類名的痛苦（有的節點確實沒啥必要取類名，但就是需要寫 CSS）？
你是否有過管理重復、繁雜、繁多的 CSS 而痛苦？

以上三個問題，在你使用了 UnoCSS 之后，基本上可以解決掉，使用 UnoCSS 可以更加快速地構建你的 HTML 和樣式，這是 UnoCSS 作者對 CSS 的感想：重新構想原子化 CSS，有興趣可以先去讀一讀，文章中有一個關鍵詞“原子化”，使用了之后才可能對這個關鍵詞有反應，

對 CSS 原子化的理解

我們寫 CSS 時，通常都是類名、id、標簽選中之后在 style 標簽里寫樣式，通常都是一大坨的 CSS，有時候我們遇到了樣式復用的情況，提取部分相同的樣式到一個 class 中，再給這些節點添加一個 class：

.common {
  font-size: 20px;
  color: white;
  border: 1px solid #cccccc;
}

.a {
  background: green;
}

.b {
  background: blue;
}

<div ></div>
<div ></div>

似乎這樣還不讓我們滿意，可復用性還是太低了些，假如第三個節點要用 common class 里的 border 呢？可以這樣做：

.border {
  border: 1px solid #cccccc;
}

.common {
  font-size: 20px;
  color: white;
}

<div ></div>
<div ></div>
<div ></div>

可以想象，樣式越多、這樣提取樣式的作業也就越來越多，像是 Bootstrap 這樣的 CSS 工具庫，給我們做了不少這樣的作業，可以減少很多我們寫 CSS 的時間，直接套上類名就可以了，但問題是，我們引入了 Bootstrap 之后，里面沒有用到的類樣式，也會被打包到生產環境中，是不是太影響性能了呢？我們的理想是，不用的就不要打包，舍棄掉，而只需要用到的，

UnoCSS

重新構想原子化 CSS - 向你介紹 UnoCSS，我就直接通過案例來向你展示 UnoCSS 到底給我們帶來了什么好處，先來看看我通過 UnoCSS 寫的一個 Vue 組件：

再來看看我沒有用 UnoCSS 的組件的樣子：

Vite + UnoCSS

cnpm i -D unocss

// vite.config.ts

// unocss
import Unocss from "unocss/vite";
import { presetAttributify, presetUno } from "unocss";

export default defineConfig(({ command, mode }) => {
  return {
    plugins: [
      vue(),
      Unocss({
        presets: [presetAttributify({}), presetUno()],
        rules: [
          [/^fs-(\d+\.{0,1}\d{0,2})$/, ([, d]) => ({ "font-size": `${d}px` })],
          [/^leh-(\d+\.{0,1}\d{0,2})$/, ([, d]) => ({ "line-height": `${d}` })],
        ]
      })
    ]
  };
});

UnoCSS 有一些自帶的 class，可以使用 https://uno.antfu.me/ 來查詢，沒有自己想要的話，可以通過 rules 來自己設定一個規則，如上，就可以使用啦！