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 阅读 9 次 更新于 2025-06-20 00:40:40 我来答关注问题0
  • UnoCSS Tailwind CSS 在过去几年广受欢迎,而近两年 UnoCSS 也在这个领域脱颖而出。作为高性能且极具灵活性的即时原子化 CSS 引擎,UnoCSS 并非要替代 Tailwind CSS,而是从另一个角度使原子化 CSS 在业务中融合得更加完美。UnoCSS 的作者来自 Vite 团队,我认为正是由于他是 Vite 的开发者,对于...

  •  文暄生活科普 手摸手创建一个 Vue + Ts 项目(三) —— 使用 UnoCSS 来调整布局样式

    在main.ts中引入index.css。接下来,解决布局组件高度未撑满的问题,在BasicLayout.vue组件上添加样式:style="height: 100%"。刷新页面,可以看到高度和宽度已撑满。使用UnoCSS提供一种不同的样式调整方法。UnoCSS不提供样式,需加载预设实现功能。本项目使用默认预设,尝试提供流行框架(如Tailwind CSS)...

  •  阿暄生活 uniapp+vue3开发微信小程序踩坑集

    推荐方案:使用原子化CSS,如unocss,以解决关注点分离带来的困扰,提升开发效率。UnoCSS具有按需生成class、规则编写更灵活等优势,且完全兼容Tailwind CSS。不支持的特性:注意点:uniapp不支持Vue的render、inlinetemplate、XTemplates、keepalive、transition等特性。页面跳转:注意点:理解relaunch与redirectTo...

  •  文暄生活科普 uniapp+vue3开发微信小程序踩坑集

    原子化CSS的使用,如`unocss`,能有效解决关注点分离带来的困扰,提升开发效率。`UnoCSS`相较于`Tailwind CSS`具有按需生成class、更灵活的规则编写等优势,且完全兼容`Tailwind CSS`。注意点包括不支持Vue的`render`、`inline-template`、`X-Templates`、`keep-alive`、`transition`等特性,以及`relaunc...

  •  文暄生活科普 优秀的 Vue3 开源后台模板推荐

    Vue Element Plus Admin:基于 Element Plus,使用 Vue3、Vite、TypeScript,提供开箱即用的中后台前端解决方案,平均评价4.13颗星。Soybean Admin:基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS,提供清新优雅的中后台模版,内置丰富的主题配置,平均评价4.38颗星。Vue Vben Admin:使用 Vue...

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

CSS相关话题

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