下一代 CSS 框架:Mojo CSS,为何如此受欢迎?
ccwgpt 2025-04-23 22:38 51 浏览 0 评论
Tailwind CSS 推出即受到广大开发者的欢迎,当前 Github star 数已达 77.8k。它是一个功能类优先(utility-first)的 CSS 框架,它提供了一系列功能类,让开发者可以在 HTML 中通过组合这些功能类(原子类)的方式去快速构建用户界面。
本文将给大家分享下一代原子级 CSS 框架:Mojo CSS,并简要阐述其与 Tailwind CSS 的异同。
Mojo CSS 基本介绍
Mojo CSS 定位为下一代原子级 CSS 框架,是由 Mohammad Zamanian 和 Ali Mirabbasi 开发和维护的开源项目。
Mojo CSS 于 2023 年发布,该框架的工作原理是扫描你的代码并实时创建 CSS 视觉效果,而无需你编写新的 CSS 代码。与 Tailwind 一样,Mojo CSS 也会移除未使用的 CSS,以提高页面性能并简化维护工作。
Mojo CSS 不仅仅是另一个 CSS 框架,它还是一种全新的样式设计方式,以易用性、定制化和速度优先。Mojo 的核心是一个超轻量级(约 15kb gzipped)的 JavaScript 引擎,它可以通过扫描页面上的实用工具动态生成 CSS。
快速安装:
npm install mojocss
# or
yarn add mojocss
为何 Mojo CSS 如此受欢迎?主要归因于一下方面:
1)自定义主题:
告别仅限于暗色模式的局限。Mojo 可让开发者定义无限的主题颜色,让您自由发挥创意,使您的项目真正独一无二。最棒的是什么?非常简单,只需选择三种主色调即可!
mojo({
base: {
themes: {
default: {
body: "#f2f7f9",
invert: "#6b88a5",
primary: "#ff6145",
},
// Try out different color themes,
// make as many you want without worrying about overloading the project.
dim: {
body: "#1a2a39",
invert: "#90a4b8",
},
blackout: {
body: "#000",
invert: "#999",
},
},
}
});
2)CSS 选择器:
Mojo 打破常规,让您可以在 HTML 中使用真正的 CSS 选择器,并与框架的实用工具无缝集成。这对于那些渴望灵活性和可读性的用户来说,无疑是一场变革。
当 HTML 限制了复杂的 CSS 选择器时,Mojo 的任意选择器就会介入,使您能够在标记中利用原始 CSS 的强大功能,同时充分利用 Mojo 的实用工具。
只需使用 _="" 属性,并在括号中指定所需的选择器即可:
<ul _="(li.active) bg-c-red text-c-white" >
<li>First Item</li>
<li class="active">Second Item</li>
<li>Third Item</li>
</ul>
3)内置色彩引擎:
Mojo 允许您使用无限的颜色以及无数的色调和色差,从而将颜色定制提升到一个新的水平。您的创造力无穷无尽。
<div>
<div class="bg-c-primary:-10"></div>
<div class="bg-c-primary:-5"></div>
<div class="bg-c-primary"></div>
<div class="bg-c-primary:+5"></div>
<div class="bg-c-primary:+10"></div>
</div>
4)响应式设计:
Mojo 的响应式设计使用断点变量,告诉网站如何根据屏幕尺寸安排内容。将断点定义为变体,可以根据不同的屏幕尺寸轻松调整元素样式。每个实用工具类都有响应式变体。
5)模式进一步简化:
利用 CSS-IN-JS 语法和嵌套规则,Mojo 的模式简化了 CSS 的编写,使您能够应用全局样式或封装实用程序集,从而减少代码重复。
模式对象的结构如下:
mojo({
patterns: {
// Your Styles
},
// ... other configurations
});
6)尺寸至关重要:
作者深知轻量级框架的重要性。Mojo 简化后只有约 50kb 大小,压缩后只有约 15kb 大小,非常轻量。
缩小 Mojo 的大小并不意味着牺牲功能或灵活性。尽管体积小巧,但 Mojo CSS 提供了一套全面的实用工具,让您可以制作出美观、功能丰富的用户界面。它在效率和功能之间实现了完美平衡,让您的开发之旅更加顺畅愉快。
Mojo CSS vs Tailwind CSS
Mojo CSS 比 Tailwind 更好吗?下面将比较 Mojo CSS 和 Tailwind 的各种功能,看看哪一个更胜一筹。
1)浏览器兼容性:
首先需要提到的是浏览器兼容性,Tailwind 和 Mojo CSS 对现代浏览器支持很好,不会有太多的兼容性问题。
但 Mojo CSS 为了提供流畅的手机和电脑屏幕兼容性,使用了变体断点。开发者需要使用这些断点来应对网站如何调整大小和排列内容。
2)UI 主题和组件:
Tailwind 提供定制的用户界面组件,包括各种用户界面元素,如输入框、卡片和导航栏。这些组件是使用 Tailwind 的实用工具类构建的,可以实现彻底的定制和风格化。Tailwind 通过提供预定义的内置组件,简化了 CSS 设计过程。Tailwind 拥有 500 多个自定义组件和模板。
至于 Mojo CSS,文档网站上还没有提供模板,也没有发布 Mojo CSS 组件列表,但其自定义定制化主题可能会受到更多开发者的欢迎。
3)集成和扩展性:
Tailwind 拥有庞大的用户群,由此产生了许多插件和资源。你可以使用许多免费的 Tailwind 插件来改进 CSS,比如改进宽高比的插件。你可以在这里和 Tailwind 官方文档中找到更多 Tailwind CSS 插件。
因 Mojo CSS 还比较年轻,与 Tailwind CSS 相比,Mojo CSS 的扩展和插件很少。
但值得一提的是,Mojo CSS 拥有一个名为 Mojo CSS Intellisense 的 Visual Studio 扩展,只要在 Visual Studio 的 CSS 项目中添加 mojo.config.js 文件即可使用。该扩展将为您的 Mojo 实用程序提供自动完成功能,并支持 HTML、JavaScript 和 Vue.js 等语言和框架。
4)速度与性能:
Tailwind 以提供稳定可靠的版本而著称。它采用即时 CSS 编译器,只使用必要的 CSS,而不是预先编译所有内容。Tailwind 会向客户端发送 10kB 的 CSS,以改进 CSS。至于 Tailwind 的可靠性,它是有据可查的,也是公认的。
而 Mojo CSS 虽然没有遇到重大问题,但它是一款较新且测试较少的 CSS。尽管如此,Mojo CSS 的性能仍然令人印象深刻,这主要归功于其轻量级 CSS 样式组件,总大小仅为 50 kB,压缩后为 15 kB。
5)上手成本:
Tailwind 和 Mojo CSS 都有官网及完善的文档,上手成本不高。
使用 Tailwind 可以大大减少 CSS 的编写量,而使用 Mojo CSS 则无需编写任何 CSS。与 Mojo CSS 不同的是,Tailwind 需要对 HTML 和 CSS 有深入的了解。
总结
Tailwind 和 Mojo 这两个 CSS 框架都很优秀。但对于开发者的我们,能满足我们项目需求的才是最好的框架。Mojo CSS 是一款优秀的革命性 CSS 框架,相信它还有很长的路要走,未来可期!
相关推荐
- 如何高效实现API接口的自动化测试?
-
实现API接口的自动化测试是一个多步骤的过程,涉及需求分析、测试用例设计、环境搭建、脚本编写、执行测试、结果分析和持续集成等多个环节。选择合适的工具和框架也是成功的关键。嘿,咱来聊聊实现API接口自动...
- 总结100+前端优质库,让你成为前端百事通
-
1年多时间,陆陆续续整理了一些常用且实用的开源项目,方便大家更高效地学习和工作.js相关库js常用工具类「lodash」一个一致性、模块化、高性能的JavaScript实用工具库。「xij...
- 混合开发到底怎么个混法?(混合开发rn)
-
引言最近几年混合开发越来越火,从PhoneGap到Cordova到Ionic,再到ReactNative,到Flutter。同时在搜索引擎中诸如IonicVSReactNativeRN和Weex+...
- 无所不能,将 Vue 渲染到嵌入式液晶屏
-
该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言之前看了雪碧大佬的将React渲染到嵌入式液晶屏觉得很有意思,R...
- 【直接收藏】前端 VUE 高阶面试题(一)
-
说说vue动态权限绑定渲染列表(权限列表渲染)首先请求服务器,获取当前用户的权限数据,比如请求this.$http.get("rights/list");获取到权限数据之后,在列表中...
- Vue采用虚拟DOM的目的是什么?(vue2 虚拟dom)
-
虚拟DOM更新其实效率并不像大家想象中的那么高,而且React官方也从来没说过虚拟DOM效率有多高,相反React虚拟DOM的实现也不是所有虚拟DOM产品中最好的。但是通过虚拟D...
- 什么是 JavaScript?(什么是党的旗帜)
-
本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注!作者|慕课网精英讲师然冬JavaScript(JS)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。(MDN...
- Weex在内涵发现页中的工程实践(weex唯客交易所官网)
-
React-Native和Weex是目前最为火热的两个客户端跨平台解决方案。从去年2016年9月份开始,IES在抖音产品中应用了ReactNative,中途遇到了很多的问题,尤其是长列表的性能问题一...
- 新恒汇:公司主要业务包括智能卡业务、蚀刻引线框架业务以及物联网eSIM芯片封测业务
-
证券日报网讯新恒汇7月3日在互动平台回答投资者提问时表示,公司主要业务包括智能卡业务、蚀刻引线框架业务以及物联网eSIM芯片封测业务。具体请关注公司公告和公开披露信息。(编辑王雪儿)...
- “移”科普——什么是物联网?(移动设备物联网物联网应用实例)
-
物联网(InternetofThings,简称IoT)是指通过互联网将物理世界与数字世界相连接,实现物与物之间的智能互联的网络。它是一种新型的信息通信技术,通过传感器、嵌入式系统、网络技术等手段,...
- 如何自己搭建一个物联网平台?(自建物联网云平台)
-
自己搭建一个物联网(IoT)平台需要涉及多个关键步骤,包括硬件设备的选择、软件开发、网络通信、安全性设计以及数据管理。以下是搭建物联网平台的基本流程:1.确定物联网平台架构一个完整的物联网平台通常包...
- 物联网数据接入篇-应用层 Modbus(5)
-
前四篇文章讲述的是TCP/IP模型中的网络接口层、网络层、传输层、应用层一,这里到了第四层应用层二。由于协议比较多,就分开篇来介绍。这篇讲Modbus协议,后面再讲MQTT协议、CoAP协议、...
- 乐鑫ESP32-C5全面量产:行业首款双频Wi-Fi 6的RISC-V SoC
-
IT之家5月2日消息,乐鑫信息科技4月30日宣布,ESP32-C5现已全面进入量产。ESP32-C5宣称是行业首款2.4&5GHz双频Wi-Fi6的RISC-...
- Vue Shop Admin:强大而易用的后台管理系统模板
-
VueShopAdmin是一个基于Vue.js框架的后台管理系统模板。它具有简洁、易用和美观的特点,非常适合开发人员用于快速构建各种类型的管理系统。这个模板使用了最新的技术,如Vue3、V...
- 基于Prometheus的自动化巡检(prometheus自动发现详解)
-
!!大家好,我是乔克,一个爱折腾的运维工程,一个睡觉都被自己丑醒的云原生爱好者。作者:乔克公众号:运维开发故事道路千万条,安全第一条。操作不规范,运维两行泪。前言目前,大部分公司都采用Promet...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- ui自动化框架 (47)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)