大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。
Mojo CSS 是一个原子 CSS 框架,其基于 HTML 实时生成 CSS,并且运行时间接近零。Mojo CSS 提供了创建自定义、美观且响应式布局的最快方法,而无需编写一行 CSS。 全套实用程序可帮助开发者充分发挥网页的性能。
目前 Mojo CSS 在 Github 通过 MIT 协议开源,代表了下一代原子 CSS 框架,无需交付任何 CSS 即可打造华丽的 UI。
当其他框架和库将 CSS 生成静态文件时,Mojo 会实时处理一切。 其会自动扫描 HTML,查找使用的实用程序,并仅生成这些实用程序所需的 CSS。
Mojo 不断扫描网页,并在每次检测到 DOM 变化时生成所需的 CSS。比如,当用户输入 class="bg-c-blue",Mojo CSS 会自动编译生成以下样式:
<style>.bg-c-blue { ...}</style>
这样方式不仅可以节省文件大小、实现快速渲染,并且能够实时设置 HTML 样式,因为浏览器会立即接收到更改,而无需重新加载页面。
与其他框架不同,Mojo 提供了一种独特的样式方法,使其有别于传统的 CSS 框架。虽然普通项目通常需要至少 100kb 的 CSS 来处理样式,但 Mojo 只需要一个约 50kb(15kb gzip 压缩)的 JS 文件即可处理任何规模项目的样式。
// Import Mojo CSSimport mojo from 'mojocss'// Initializemojo()
这种方法可以显著减少页面加载时间并提高性能。 Mojo 不是加载大型 CSS 文件并将样式应用到页面上的所有元素,而是使用单个 JavaScript 文件实时设置元素样式,这意味着仅加载页面上当前可见元素所需的样式。
Mojo CSS 无需每次加载页面时下载数百 KB 的代码,从而缩短页面加载时间并提高网站性能。
Mojo 遵循 Atomic CSS 方法,这意味着其专注于提供一组可用于构建自定义用户界面的底层 CSS 实用程序。
Mojo 不提供自定义的 UI 工具包,而是让开发人员能够灵活地使用提供的实用程序创建自己的 UI 设计。以下是使用 Mojo 实用程序的 qoute 卡的示例。
<div class="bg-c-body:+2 pa-5 border-left-3 border-c-primary rounded-right-5"> <quote class="text-c-stronginvert"> “Any sufficiently advanced technology is indistinguishable from magic” </quote> <div class="mt-4"> Arthur C. Clarke </div></div>
Mojo 是另一个典型的 Atomic CSS 框架吗?不是! Mojo 通过引入属性变体而脱颖而出,使 Atomic CSS 更具可读性且更易于维护。下面将 Mojo 与传统的 Atomic CSS 框架进行比较:
<!-- Typical Atomic CSS frameworks --><div class="bg-red-400 px-5 hover:bg-red-600 hover:px-8"> ...</div><!-- Mojo CSS --><div class="bg-c-red px-5" hover="bg-c-red:+2 px-8"> ...</div>
由于担心多次重复代码,使用原子设计的想法似乎仍然没有吸引力,然而利用组合实用程序的概念却与众不同。
当构建项目时,开发者可能会发现自己一遍又一遍地重复相同的实用程序模式,从而 使代码难以维护和更新。
通过创建使用 Mojo 实用程序的自定义组件,可以保持代码 DRY(Don't Repeat Yourself)并更轻松地维护和更新项目。
以一个按钮为例:
<button class="bg-c-primary text-c-white py-2 px-4 rounded-4" hover="bg-c-primary:+5"> Button</button>
使用 React、Vue 或 Angular 等 JavaScript 框架时,建议创建使用 Mojo 实用程序的自定义组件。
这允许开发者利用框架的强大功能来创建动态和交互式用户界面,同时仍然利用 Mojo 的实用程序来处理组件的样式。
例如,如果在 Vue 中构建按钮组件,则可以创建如下自定义组件:
<template> <button class="bg-c-primary text-c-white py-2 px-4 rounded-4" hover="bg-c-primary:+5"> <slot></slot> </button></template><script> export default { name: "custom-button" }</script>
然后在 Vue 模板中使用:
<custom-button> <!-- button content --></custom-button>
如果不使用 JS 框架,则可以使用 Mojo 的模式。 模式提供了一种将一组实用程序封装到一个类中的方法,然后可以在整个项目中重复使用该类。
以按钮为例:
mojo({ patterns : { '.btn': { idle : 'bg-c-primary text-c-white py-2 px-4 rounded-4', hover: 'bg-c-primary:+5' } },})
接着就可以在 HTML 中如下引入:
button class="btn"> <!-- button content --></button>
https://mojocss.com/docs/guide/component-abstraction
https://github.com/mojocss/mojocss