大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1. 什么是 Mojo CSS？

Mojo CSS 是一个原子 CSS 框架，其基于 HTML 实时生成 CSS，并且运行时间接近零。Mojo CSS 提供了创建自定义、美观且响应式布局的最快方法，而无需编写一行 CSS。 全套实用程序可帮助开发者充分发挥网页的性能。

目前 Mojo CSS 在 Github 通过 MIT 协议开源，代表了下一代原子 CSS 框架，无需交付任何 CSS 即可打造华丽的 UI。

2.Mojo CSS 有什么突出优势

2.1 按需添加样式

当其他框架和库将 CSS 生成静态文件时，Mojo 会实时处理一切。 其会自动扫描 HTML，查找使用的实用程序，并仅生成这些实用程序所需的 CSS。

Mojo 不断扫描网页，并在每次检测到 DOM 变化时生成所需的 CSS。比如，当用户输入 class="bg-c-blue"，Mojo CSS 会自动编译生成以下样式：

<style>
.bg-c-blue {
    ...
}
</style>

这样方式不仅可以节省文件大小、实现快速渲染，并且能够实时设置 HTML 样式，因为浏览器会立即接收到更改，而无需重新加载页面。

2.2 文件大小

与其他框架不同，Mojo 提供了一种独特的样式方法，使其有别于传统的 CSS 框架。虽然普通项目通常需要至少 100kb 的 CSS 来处理样式，但 Mojo 只需要一个约 50kb（15kb gzip 压缩）的 JS 文件即可处理任何规模项目的样式。

// Import Mojo CSS
import mojo from 'mojocss'
// Initialize
mojo()

这种方法可以显著减少页面加载时间并提高性能。 Mojo 不是加载大型 CSS 文件并将样式应用到页面上的所有元素，而是使用单个 JavaScript 文件实时设置元素样式，这意味着仅加载页面上当前可见元素所需的样式。

Mojo CSS 无需每次加载页面时下载数百 KB 的代码，从而缩短页面加载时间并提高网站性能。

2.3 原子 CSS

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>

由于担心多次重复代码，使用原子设计的想法似乎仍然没有吸引力，然而利用组合实用程序的概念却与众不同。

3.Mojo CSS 组件抽离

当构建项目时，开发者可能会发现自己一遍又一遍地重复相同的实用程序模式，从而 使代码难以维护和更新。

通过创建使用 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>

3.1 使用 JavaScript 框架

使用 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>

3.2 使用模式 (Pattern)

如果不使用 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