CSS原子化

目录

一、定义

二、原子化工具

2.1、tailwind

2.1.1、以PostCss插件形式安装

2.1.2、不依赖PostCss安装

2.1.3、修改原始配置

2.2、unocss

三、优缺点

3.1、优点

3.2、缺点

一、定义

定义：使用一系列的助记词，利用类名来代表样式。

二、原子化工具

2.1、tailwind

翻译过来是“顺风”的意思。

官网：Installation - Tailwind CSS

2.1.1、以PostCss插件形式安装

如果是单纯的文件夹：

(1)、初始化：npm init -y

(2)、安装3个插件：npm i tailwindcss postcss-cli autoprefixer -D

(3)、生成相关配置文件：npx tailwind init -p

(4)、在文件夹里新建src,在sc下新建style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

(5)、将package.json里"scripts"的内容改为："build": "postcss src/style.css -o dist/tailwind.css"

(6)、npm run build 成功后就可以看到dist/tailwind.css，即编译成功。(注意：node版本一定在16+，不然编译报错。)

(7)、以index.html为例：

<link rel="stylesheet" href="tailwind.css">
<div class="text-base p-1 border border-black border-solid"></div>
//==========================等同于==============================
.text-base {font-size: 16px;
}
.p-1 {padding: 4px;
}
.border {border-width: 1px;
}
.border-black {border-color: black;
}
.border-solid {border-style: solid;
}

剩下的官网里都有，可以自己去找。

2.1.2、不依赖PostCss安装

几乎和上面一样，就是这两个命令行npm i tailwindcss autoprefixer -D和npx tailwind init稍有改变，配置文件内容变成了   "build": "tailwind build src/style.css -o dist/tailwind.css"。

2.1.3、修改原始配置

以“text-base”为例：

数组里的两个元素分别是 font-size 和 line-height 两个样式。

module.exports = {content: [],theme: {extend: {padding: {'1': '30px'},fontSize: {'base': ['30px', '2rem']}},},plugins: [],
}
//================修改后的p-1和text-base
.p-1 {padding:30px;
}
.text-base {font-size:30px;line-height:2rem;
}

原子类名太多很难记住，不能每次都去查看文档，可以安装插件Tailwind CSS IntelliSense解决。

2.2、unocss

UNO翻译过来是“联合国组织”的意思。

官网：UnoCSS: The instant on-demand Atomic CSS engine

原子类名太多很难记住，不能每次都去查看文档，可以安装插件UnoCss或者To Unocss解决。

(1)、安装：

npm i unocss @iconify-json/ep @unocss/preset-rem-to-px @unocss/transformer-directives -D

@iconify-json/ep ==> 是Element Plus图标库 Icônes；

@unocss/preset-rem-to-px ==> 将unocss自带的rem转为px；

@unocss/transformer-directives ==>可以使用@apply、@screen、theme函数

(2)、vite.config.ts：

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
export default defineConfig({plugins: [UnoCSS(),],
})

(3)、创建一个 uno.config.ts文件：

import presetRemToPx from '@unocss/preset-rem-to-px'
import transformerDirectives from '@unocss/transformer-directives'
import { defineConfig, presetAttributify, presetUno, transformerVariantGroup, presetIcons } from 'unocss'
export default defineConfig({presets: [presetAttributify(),presetUno(),presetRemToPx({baseFontSize: 4}),//eg:mt-1或转换为margin-top:1pxpresetIcons({scale: 1.2,warn: true})//自动引入图标配置],transformers: [transformerVariantGroup(), transformerDirectives()],rules: [// m-1可转换为margin:0.25rem// [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],],//自定义配置项shortcuts: [{'flex-center': 'flex items-center justify-center',//垂直居中'flex-end': 'flex items-center justify-end',//放在最后'flex-middle': 'flex items-center',//垂直居中'flex-between': 'flex items-center justify-between',//分开两边'flex-col-center': 'flex flex-col justify-center',//竖着居中}]//自定义属性  一个属性可以对应多个unocss类值
})

(4)、main.ts全局配置：

import 'virtual:uno.css'

(5)、使用：

(6)、图标应用：

<div i-ep:dish></div>
<i w110 h100 block i-ep:switch-button></i>

三、优缺点

3.1、优点

(1)、随着业务增长，css文件大小的增长放缓了；

(2)、HTML结构可以随处移动，同样样式不变；

(3)、样式会随着HTML结构删除的同时一起被删除；

(4)、节省了为类名取名字的精力。

3.2、缺点

(1)、定义原子类（记住类名）耗费精力；

(2)、HTML结构变得臃肿；

(3)、团队合作时，解读其他成员代码耗费时间；

原子化工具还有windi...等等，这里着重介绍上面两种。