大家好，今天给大家带来原子CSS的分享，让大家了解它的编程思想以及目前比较流行的一些框架。
1. CSS1.1原子的基本概念是什么
Atomic CSS（原子CSS）的受欢迎程度近年来逐渐下降，与Atomic CSS相关的库也在Github上获得了数万个Star。 那么什么是原子CSS呢？ 引用《让我们准确定义什么是原子 CSS》一文中的定义：“原子 CSS 是 CSS 架构的一种形式，它支持大型、单一用途的类，这些类的名称基于视觉功能。”
更简单地说，原子化 CSS 是一种新的 CSS 编程风格，它倾向于创建紧凑且单一用途的类，以视觉效果命名。 举个简单的例子：
<style>
.text-white { color: white; }
.bg-black { background-color: black; }
.text-center { text-align: center; }
</style>
<div class="text-white bg-black text-center">hello Atomic CSS</div>
1.2 VS 内联样式
看到上面的例子，你可能很快就会想到，直接使用内联样式，并且还保存原子类的定义不是更好吗？ 这个问题可以从风格编译、一致性、功能性、缓存四个方面来回答。
在样式编译层面，CSS预处理和后处理很大程度上依赖于单独的样式表。 原子化CSS可以充分利用Sass、Less等CSS预处理器功能进行样式编译。 同时，PostCSS可以用来进一步完善CSS功能。 对于内联样式，虽然在技术上支持前处理和后处理，但很少有成熟的工具对此提供支持和维护。
在一致性层面，原子CSS框架通常有一个预定义的设计系统，开发者只能选择设计系统中要设置的值。 对于内联样式或传统 CSS 类定义，可以设置的值没有限制。 对于内联样式或传统 CSS 类设置，标签的字体大小可能是 14px 或 0.875rem。 当产品（或客户）说需要更小时，开发人员 A 可能会将其调整为 13px，开发人员 B 可能会 Resize 为 12px。 但对于原子 CSS 框架，将其调低一点意味着将类从 text-sm 设置为 text-xs。
以下是一些使用传统CSS类编译的网站风格统计（统计来源）：
从功能上来说，原子化CSS本质上是一个CSS类，因此支持媒体查询功能，也支持悬停、聚焦等处理元素，而内联样式则缺少这部分能力。
打包方面，内联样式包含在JS文件中。 样式更改将导致整个包的更改。 原子化 CSS 样式定义与 JS 逻辑分离。 修改元素的class属性可能不会影响它（在没有新的CSS类的情况下）最后打包输出样式文件。
2. 谁在使用原子CSS
到目前为止，一些网站已经借用或使用原子CSS的思想来构建自己的网站。 比较出名的网站有Facebook、Twitter、Github、swipperjs等，根据网上公布的信息，Facebook用原子CSS的思想构建后，登陆页面只有413KB的样式文件减少到了74KB对于整个网站。
3. 流行的atomic CSS框架 3.1 Tailwind CSS3.1.1简介
Tailwind CSS 是一个功能优先的 CSS 框架，它继承了 flex、pt-4、text-center 和rotate-90 等类，可以直接在脚本标记中组合以构建任何设计。 截至目前css加深，该框架在Github上拥有6.21万颗星，在2021年最受欢迎项目中排名第六。上面提到的swipperjs网站就使用了该框架。
3.1.2 安装
本文以Create React App结合Tailwind CSS创建的应用程序为例。 如需更多安装，请参阅此链接。
创建项目
npx create-react-app tailwind-demo
cd tailwind-demo
安装tailwindcss相关依赖并初始化
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
在根目录下新建tailwind.config.js文件，添加以下配置
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
在./src/index.css文件底部添加以下代码
@tailwind base;
@tailwind components;
@tailwind utilities;
原子类现在可以在组件中使用
// app.js
function App() {
return (
<div className="w-screen h-screen flex items-center justify-center">
<span className="text-3xl">hello tailwindcss</span>
</div>
);
}
export default App;
建议安装VS Code插件Tailwind CSS IntelliSense，以便在编译代码时获得句型提示。
3.1.3 功能
Tailwind CSS已经内置了比较成熟的原子类和设计系统，可以直接在HTML中使用。 这也是atomic CSS的核心功能。 下面介绍该CSS框架的其他常见功能：
<form class="...">
<div>
<label class="...">用户编号</label>
<input
class="disabled:bg-gray-100 ..."
disabled
value="1234"
/>
</div>
<div class="mt-4">
<label class="block mb-2 after:content-['*'] after:text-red-600">用户名称</label
>
<input
class="border-gray-300 focus:border-blue-300 placeholder:text-gray-300 ..."
placeholder="请输入用户名称"
/>
</div>
<button class="bg-gray-100 hover:bg-blue-200 active:opacity-70 ...">
点击保存
</button>
</form>
<ul class="...">
<li class="even:bg-gray-50 first:text-blue-600 last:text-red-600 ...">
111111
</li>
<li class="even:bg-gray-50 first:text-blue-600 last:text-red-600 ...">
222222
</li>
<li class="even:bg-gray-50 first:text-blue-600 last:text-red-600 ...">
333333
</li>
<li class="even:bg-gray-50 first:text-blue-600 last:text-red-600 ...">
444444
</li>
</ul>
<p class="first-letter:text-4xl first-line:font-bold ...">
Hello Tailwind Hello Tailwind Hello Tailwind Hello Tailwind Hello
Tailwind Hello Tailwind Hello Tailwind Hello Tailwind
</p>
<div class="rounded-2xl lg:rounded-md ..."></div>
<div class="bg-white dark:bg-black ..."></div>
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
// 自定义屏幕断点
screens: {
'sm': '480px',
'md': '768px',
'lg': '976px',
'xl': '1440px',
'2xl': '1860px'
},
// 自定义调色板，设置之后覆盖默认调色板，可以在背景、字体、边框颜色设置中使用。
// 原有如bg-blue-50、text-gray-50等值不可用
colors: {
'transparent': 'transparent',
'black': '#000',
'white': '#fff',
'gray': {
100: '#f7fafc',
900: '#1a202c',
},
},
// 自定义边界圆弧，设置之后覆盖默认边界圆弧。
borderRadius: {
DEFAULT: '12px', // 默认值，使用rounded即可
'none': '0',
'sm': '4px',
},
// 扩展Tailwind CSS内置主题
extend: {
// 扩展屏幕断点的值，增加3xl大小屏幕，可以使用3xl:xxx的写法。
screens: {
'3xl': '2560px'
},
// 扩展间距的值，增加128和144的大小，可以使用p-128、m-128的写法。
// 默认情况下，该设置将影响padding、margin、width、height、maxHeight、flex-basis等值的设置。
spacing: {
'128': '32rem',
'144': '36rem',
},
}
},
plugins: [],
}
<div class="pt-[26px] lg:pt-[36px] color-[#eee]"></div>
<div class="bg-[url('/assets/mi.svg')]"></div>
<div class="!pt-1"></div>
<button class="btn-primary">
Save changes
</button>
/* @apply 抽取公共样式，应尽量避免使用，需要起类名并且会导致CSS生产包变大 */
.btn-primary {
@apply py-2 px-4 bg-blue-500;
}
3.2 Windi CSS3.2.1简介
Windi 声称是下一代功能优先的 CSS 框架。 Windi CSS 可以看作是 Tailwind 的按需替代品。 似乎解决了Tailwind v2.0随着项目规模增大初始编译缓慢和热更新的问题。
Windi CSS 与 Tailwind v2.0 完美兼容，并拥有很多额外的令人眼花缭乱的功能。
该框架在 Github 上有 5800 颗星。
不过需要注意的是，Tailwind v3中默认启用了实时引擎（JIT），实现了类似Windi的按需加载功能，构建速度得到了很大的提升。 也可能是这个原因，Windi的Github仓库至今已经半年没有提交代码了。
3.2.2 安装
本文以Create React App创建的应用程序集成Windi CSS为例。 更多安装请参考此链接。
创建项目
npx create-react-app windi-demo
cd windi-demo
安装 webpack 扩展和插件
npm i react-app-rewired windicss-webpack-plugin
在根目录下新建config-overrides.js，引用windi插件。 这一步的实质是配置windicss-webpack-plugin插件，也可以通过其他方法来扩展cra的webpack配置。
const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
module.exports = function override(config) {
config.plugins.push(new WindiCSSWebpackPlugin({ virtualModulePath: "src" }));
return config;
};
修改package.json中的scripts命令
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
在根目录下新建windi.config.js文件，添加以下配置
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
extract: {
include: ['**/*.{jsx,js,css,html}'],
exclude: ['node_modules', '.git'],
},
})
在index.js中引入windi.css
import './windi.css' // 如果报错可以尝试 import './virtual:windi.css'
原子类现在可以在组件中使用
// app.js
function App() {
return (
<div className="w-screen h-screen flex items-center justify-center">
<span className="text-3xl">hello windicss</span>
</div>
);
}
export default App;
3.2.3 功能
Windi CSS 与 Tailwind v2.0 完美兼容，包括其所有工具类和几乎所有功能。 还添加了许多附加功能。
<div class="text-20px text-hex-1e1e1e">自动值推导</div>
<div className="text-blue-700 hover:(text-blue-900 font-bold)">修饰组</div>
<button
bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
text="sm white"
font="light"
p="y-2 x-4"
border="2 rounded blue-200"
>
Button
</button>
<button
mi-bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
mi-text="sm white"
mi-font="light"
mi-p="y-2 x-4"
mi-border="2 rounded blue-200"
>
Button
</button>
3.3 UnoCSS3.3.1简介
UnoCSS 是一个高性能且极其灵活的动态原子 CSS 引擎。 它是一个引擎而不是框架，因为它不提供核心实用程序类，并且所有功能都是通过预设和内联配置提供的。 UnoCSS的主要目标是直观性和可定制性，它允许开发人员在很短的时间内定义自己的CSS工具类。 尽管 UnoCSS 仍处于测试阶段，但其在 Github 上的 Star 数已达到 7.5k。
3.3.2 安装
由于UnoCSS对Vite有更好的支持，本文将以使用Vite初始化React项目并集成UnoCSS为例。 有关更多安装信息，请查看此链接。
创建项目
npm create vite@latest unocss-demo -- --template react
cd unocss-demo
npm i
安装 UnoCSS 插件
npm i unocss
引用 vite.config.js 中的插件
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import Unocss from "unocss/vite";
export default defineConfig({
plugins: [
react(),
Unocss({
plugins: [],
}),
],
});
在 src/main.jsx 中添加以下引用
import 'uno.css'
原子类现在可以在组件中使用
// app.js
function App() {
return (
<div className="w-screen h-screen flex items-center justify-center">
<span className="text-3xl">hello tailwindcss
