現(xiàn)代前端CSS的救星？《從 Tailwind CSS 到 UnoCSS - 原子化》

念-原子化CSS

原子化 CSS 是一種 CSS 的架構(gòu)方式，它傾向于小巧且用途單一的 class，并且會(huì)以視覺(jué)效果進(jìn)行命名。

聽(tīng)起來(lái)厲害，但實(shí)現(xiàn)的最終方式超級(jí)簡(jiǎn)單，核心就是預(yù)置一大堆 class 樣式，盡量將這些 class 樣式簡(jiǎn)單化、單一化，在開(kāi)發(fā)過(guò)程中，可以直接在 DOM 中寫預(yù)置好的 class 名快速實(shí)現(xiàn)樣式，而不需要每次寫簡(jiǎn)單枯燥大量的 css 樣式，如下代碼所示：

先預(yù)置一組class列表

.m-10 { margin: 10px; }
.p-5 { padding: 5px; }
.text-red { color: red; }
 // 無(wú)數(shù)個(gè)....

編碼時(shí)在dom中直接寫class名，快速實(shí)現(xiàn)樣式

<div class="m-10 p-5 text-red">
  測(cè)試dom
</div>

而預(yù)置的class列表中的樣式，有著一定的規(guī)律，開(kāi)發(fā)者可以通過(guò)學(xué)習(xí)快速掌握，利用多個(gè)class在dom中的組合快速實(shí)現(xiàn)效果

Tailwind CSS 廣受歡迎

Cover image for 4 Reasons why I start using Tailwind CSS in every project

Tailwind CSS 主張讓你無(wú)需離開(kāi) HTML 即可快速構(gòu)建網(wǎng)站，并有許多非常非常實(shí)用的優(yōu)點(diǎn)：

對(duì) class 極致的封裝，最大程度提高復(fù)用性
易擴(kuò)展的的各種自定義配置
構(gòu)建時(shí)清除未引用的 css 樣式，解決生產(chǎn)環(huán)境 CSS 冗余的問(wèn)題
舒適的響應(yīng)式開(kāi)發(fā)體驗(yàn)
函數(shù)、指令、布局、動(dòng)畫，......等等

幾乎囊括了開(kāi)發(fā)者日常原生 CSS 開(kāi)發(fā)中遇到的所有頭痛，不舒服的開(kāi)發(fā)體驗(yàn)，所以說(shuō)他確實(shí)是很實(shí)用的工具。Tailwind CSS 真的是為前端開(kāi)發(fā)者造福了。

在前端構(gòu)建工具鏈中 Tailwind CSS 作為 PostCSS[4] 插件可與其他預(yù)處理器[5]結(jié)合使用，并優(yōu)化生成的 CSS 文件。。

UnoCSS

Tailwind CSS 在過(guò)去幾年廣受歡迎，近兩年 UnoCSS 又脫穎而出，這里需要先夸一下 UnoCSS 官網(wǎng)的圖標(biāo)&文字&背景色的色彩漸變聯(lián)動(dòng)主題，很酷！！

Cover image for UnoCSS, Vite + Vue3 easy setup

按 UnoCSS 作者的說(shuō)法，UnoCSS 并非要替代 Tailwind CSS 而是從另一個(gè)角度使原子化CSS在業(yè)務(wù)中融合的更完美。

UnoCSS 作者是 Vite 團(tuán)隊(duì)成員，我覺(jué)得正是因?yàn)樗鳛?Vite 的開(kāi)發(fā)者，對(duì)于工程化構(gòu)建具有很高的敏感度，所以才能創(chuàng)造出 UnoCSS 將原子化的CSS與前端工程融合到極致。

那么 UnoCSS 做了哪些事呢：

按需生成
生成業(yè)務(wù)真正使用到的 class ，同時(shí)在開(kāi)發(fā)和生產(chǎn)環(huán)境使用
對(duì)比 Tailwind CSS 只在生產(chǎn)環(huán)節(jié)清除無(wú)引用代碼，UnoCSS 在開(kāi)發(fā)環(huán)節(jié)也通過(guò)文件監(jiān)聽(tīng)按需傳輸，獲得更快地性能（雖然已經(jīng)很快了，但再快一點(diǎn)總歸是個(gè)提升嘛）

"傳統(tǒng)的方式"

"按需分配的方式"

極具靈活性
UnoCSS 對(duì)自己定位是一個(gè) CSS 引擎而非一個(gè)框架，所以它與 Tailwind CSS 應(yīng)該是包含關(guān)系，UnoCSS 作為規(guī)則的制定者，而 Tailwind CSS 可以作為其中的一組 preset

import UnocssPlugin from '@unocss/vite'

import PresetTachyons from '@unocss/preset-tachyons'
import PresetBootstrap from '@unocss/preset-bootstrap'
import PresetTailwind from '@unocss/preset-tailwind'
import PresetWindi from '@unocss/preset-windi'
import PresetAntfu from '@antfu/oh-my-cool-unocss-preset'

export default {
  plugins: [
    UnocssPlugin({
      presets: [
        // PresetTachyons,
        PresetBootstrap,
        // PresetTailwind,
        // PresetWindi,
        // PresetAntfu
        // 選擇其中一個(gè)...或多個(gè)！
      ]
    })
  ]
}

屬性化書寫 class 名

// 將冗長(zhǎng)的 calss 按類型區(qū)分，更方便閱讀理解
<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>

// 改變?yōu)?<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

在自定義規(guī)則上，UnoCSS 提供更加靈活的靜態(tài)&動(dòng)態(tài)匹配規(guī)則
編譯進(jìn)一步優(yōu)化（比如不再解析AST），生產(chǎn)構(gòu)建速度再度提升

UnoCSS 等于是做了個(gè)更上層的引擎，以后再有新的原子化CSS框架也可以兼容進(jìn)來(lái)了，省得你有選擇困難癥。

原子化CSS并非現(xiàn)代前端CSS的救星

Tailwind CSS 與 UnoCSS 的特性和使用方法并非本文主要想講的，具體細(xì)節(jié)大家可移步官網(wǎng)查看，這里主要想討論下

Tailwind CSS 或 UnoCSS 的原子化CSS 會(huì)是現(xiàn)代前端解決CSS問(wèn)題的最佳實(shí)踐嗎？
我覺(jué)得答案是否定的

從我的直接觀感，原子化CSS更像是一個(gè)輔助型的實(shí)用工具，而非CSS問(wèn)題的解決方案，作為輔助工具，它確實(shí)是能在某類業(yè)務(wù)場(chǎng)景或者業(yè)務(wù)發(fā)展的某個(gè)階段提供非常大的幫助，但從整個(gè)復(fù)雜多變的前端業(yè)務(wù)場(chǎng)景上看，它的能力是有限的。

最直觀的的結(jié)果就是當(dāng)業(yè)務(wù)復(fù)雜度提升到某個(gè)階段后，原子化CSS的性價(jià)比將急劇下降，帶來(lái)的HTML代碼冗余，可讀性差，難以維護(hù)的問(wèn)題將直接影響到業(yè)務(wù)開(kāi)發(fā)。
尤其是現(xiàn)在無(wú)論是 Vue 的單文件組件還是 React 的函數(shù)式組件，都會(huì)將部分 JS 邏輯注入 HTML 中，如果 CSS 邏輯也要通過(guò) class 名組合的方式注入其中，那就太混亂了。
但 Vue 或 React 各自的組件化設(shè)計(jì)思想，都可以通過(guò)各自的組件化拆分來(lái)解決代碼冗余的問(wèn)題，使其可適用于各種簡(jiǎn)單&復(fù)雜的業(yè)務(wù)場(chǎng)景，是一套完善的最佳實(shí)踐，而原子化CSS 沒(méi)有辦法做組件化拆分的，所以隨著業(yè)務(wù)復(fù)雜度的上升，代碼冗余遲早會(huì)發(fā)生，這直接限制了此類框架的普及，所以它無(wú)法作為前端CSS問(wèn)題的根本解決方案。

從設(shè)計(jì)思想上，原子化CSS看起來(lái)也與目前主流的組件化，函數(shù)式編程顯得格格不入。

適用場(chǎng)景

在一些簡(jiǎn)單的業(yè)務(wù)場(chǎng)景上，原子化CSS確實(shí)有非常大的優(yōu)勢(shì)，比如快速開(kāi)發(fā)響應(yīng)式H5，業(yè)務(wù)復(fù)雜度低的中后臺(tái)系統(tǒng)，簡(jiǎn)單的官網(wǎng)頁(yè)面。

而在一些復(fù)雜的業(yè)務(wù)場(chǎng)景，比如復(fù)雜的C端業(yè)務(wù)，大型的系統(tǒng)就不在那么適用了。

從 Tailwind CSS 到 UnoCSS —— 原子化真的是現(xiàn)代前端CSS的救星嗎
原文鏈接：https://juejin.cn/post/7293786856063205385

者：鄭振波

轉(zhuǎn)發(fā)鏈接：https://www.yuque.com/xwifrr/khuqsn/mgxnoe

生產(chǎn)環(huán)境下，每次打包構(gòu)建后，都會(huì)生成hash值不用的文件，造成了很多冗余的文件，因此我們需要引入一個(gè)插件來(lái)在打包的時(shí)候先清理目錄。

npm i clean-webpack-plugin -D

webpack.prod.js的配置如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//打包html
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//分離樣式
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');//壓縮css
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//打包前清理文件夾
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.base.js');
let prodConfig = {
  entry: './src/main.js',
  output: {
    filename: 'bundle-[name]-[chunkhash].js',
    path: resolve(__dirname, '../dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true//開(kāi)啟babel緩存
        }
      },
    ]
  },
  plugins: [
    //清理目錄
    new CleanWebpackPlugin(),
    // 打包html
    new HtmlWebpackPlugin({
      template: './src/assets/index.html',
      hash: true,
      filename: 'index.html',
      favicon: './src/assets/favicon.ico',
      minify: {
        collapseWhitespace: true,//移除空格
        removeComments: true,//移除注釋
      }
    }),
    // 壓縮css
    new CssMinimizerWebpackPlugin(),
    // 分離css
    new MiniCssExtractPlugin({
      filename: 'index-[name]-[contenthash].css'
    })
  ],
  mode: 'production',
  target: 'es5',
}
module.exports = merge(commonConfig, prodConfig);

package.json的配置如下：

{
  "name": "wpk5-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "npx webpack serve --config ./build/webpack.dev.js",
    "build": "npx webpack --config ./build/webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.0",
    "css-minimizer-webpack-plugin": "^1.3.0",
    "eslint": "^7.23.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "mini-css-extract-plugin": "^1.4.0",
    "node-sass": "^5.0.0",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
    "core-js": "^3.10.0",
    "regenerator-runtime": "^0.13.7"
  }
}

git倉(cāng)庫(kù)地址：

https://gitee.com/seimin/xiaoming2qianduan-webpack5/tree/v5.15/

在線咨詢

上一篇：手機(jī)網(wǎng)頁(yè)設(shè)計(jì)的UI界面尺寸是多少？
下一篇：WinForms DateTimePicker控件使用指南

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商