在开发一个组件的样式时，我们常常采用在 HTML 或 JSX 结构中添加具有语义化的 class 类名，并在 CSS 中定义对应类的样式。这种做法被称为 Semantic CSS（语义化CSS），是最常见、最常规的规范。它强调关注点分离，使结构与样式各司其职，使结构更具语义化。然而，在这种规范下，我们也面临着一些痛...
tailwind？unocss？青藤之恋小程序样式方案思考
从 Semantic CSS（语义化CSS）的角度出发
在开发一个组件的样式时，我们常常采用在 HTML 或 JSX 结构中添加具有语义化的 class 类名，并在 CSS 中定义对应类的样式。这种做法被称为 Semantic CSS（语义化CSS），是最常见、最常规的规范。它强调关注点分离，使结构与样式各司其职，使结构更具语义化。然而，在这种规范下，我们也面临着一些痛点，例如：
Atomic/Utility-First CSS（原子化/功能优先 CSS）
与 Semantic CSS 相比，Atomic/Utility-First CSS（原子化/功能优先 CSS）则提供了一个由不同功能类组成的工具箱，我们可以将它们混合在一起应用在 HTML 元素上。对于 Atomic CSS（原子 CSS）来说，在物理世界中，原子是一般物质的最小单位，而在 CSS 世界中，则是一个类中只有唯一的 CSS 规则。
Tailwind CSS
Tailwind CSS 是一种基于 Atomic/Utility-First CSS 规范的 CSS 框架，非常受欢迎。
基于 Atomic/Utility-First CSS 规范的 Tailwind CSS 框架具有以下优点：
但同时也存在一些问题：
UnoCSS
Tailwind CSS 在过去几年广受欢迎，而近两年 UnoCSS 也在这个领域脱颖而出。作为高性能且极具灵活性的即时原子化 CSS 引擎，UnoCSS 并非要替代 Tailwind CSS，而是从另一个角度使原子化 CSS 在业务中融合得更加完美。
UnoCSS 的作者来自 Vite 团队，我认为正是由于他是 Vite 的开发者，对于工程化构建具有很高的敏感度，才能创造出将原子化 CSS 与前端工程融合到极致的 UnoCSS。
那么 UnoCSS 做了哪些事呢：
青藤样式方案小程序不仅是小程序，青藤之恋还有跨端投放 H5 及中后台（React 项目），为了保证项目的平顺性和一致性，也需要应用 Tailwind。2024-08-11
