tailwind?unocss?青藤之恋小程序样式方案思考

在开发一个组件的样式时,我们常常采用在 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
mengvlog 阅读 52 次 更新于 2025-10-29 19:17:13 我来答关注问题0
  •  誉祥祥知识 🔥 用过 UnoCSS 之后,为什么我还是选择了 Tailwind CSS?

    容错性更好:在使用 Tailwind CSS 时,如果 tailwind.config.ts 文件存在语法错误,开发环境不会直接终止,而是会给出错误提示,允许开发者在不影响开发进程的情况下进行修正。相比之下,UnoCSS 在配置错误时可能会导致开发环境崩溃,需要手动重启,这在一定程度上影响了开发体验。三、开发体验与工具支持 ...

  •  誉祥祥知识 993🦁被UnoCss给Border了

    Tailwind CSS的默认边框样式:在Tailwind CSS中,当你仅使用border类时,它会默认应用一个实线(solid)边框。这是Tailwind CSS为了简化样式定义而提供的一种便捷方式。因此,在Tailwind下,你的元素即使只写了border,也会有一个实线边框。UnoCss的样式处理机制:UnoCss是一个基于规则的CSS-in-JS解决方案...

  •  文暄生活科普 CSS 工程化底层逻辑:从预处理器到原子化CSS的架构演进

    TailwindCSS:TailwindCSS是一个功能类优先的CSS框架,它提供了一套丰富的功能类,允许我们通过组合这些类来快速构建页面样式。TailwindCSS的原子化思想使得我们可以避免编写冗余的CSS代码,提高开发效率。UnoCSS:UnoCSS是一个高度可配置的原子化CSS引擎,它允许我们通过配置来生成自定义的原子类。UnoCSS还支持...

  •  宜美生活妙招 高效 UI 组件,节省开发时间 | 开源专题 No.70

    unocss/unocssStars: 14.6kLicense: MIT 简介:unocss 是一个即时的按需原子 CSS 引擎,受到 Windi CSS、Tailwind CSS 和 Twind 的启发,解决了定制化、速度和体积的问题。主要特点和核心优势:完全可定制:通过预设提供所有功能,没有核心实用程序。即时性能:无解析、无 AST、无扫描,比 Windi CSS...

  •  宜美生活妙招 无需 Dev Mode,在 Figma 上轻松查看代码

    这使得 TemPad Dev 能够适配特定设计系统的 design token 输出,或者转换为特定的 CSS 语法(如 Tailwind CSS 或 UnoCSS)。支持深色主题:TemPad Dev 的 Inspect 面板直接采用 Figma 的 CSS 变量实现,与 Figma 样式融为一体。用户可以根据 Figma 偏好设置同步切换到深色主题,提供更好的视觉体验。通...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部