初探原子化CSS

原子化Css了解

什么是原子化css

• 原子化 CSS(Atomic CSS): 原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名；有些人可能会称其为函数式 CSS，或者 CSS 实用工具。本质上，可以将原子化的 CSS 框架理解为这类 CSS 的统称

.m-0 {
    margin: 0;
}
.text-red {
    color: red;
}
/* ... */

• 优缺点

  • 优点

    1. 减少了 css 体积，提高了css复用
    2. 减少起名的复杂度

  • 缺点

    1. 增加了记忆成本
    2. 增加了 html 结构的复杂性

相关框架

1. Tailwind CSS

   • Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计享受原子化 CSS 带来的快速开发体验
   • Tailwind CSS 作为 Vitesse 的默认 UI 框架，虽然 Vite 较 Webpack 等工具相比，在加载速度上有了大幅提升，但由于 Tailwind 生成了数 MB 的 CSS，使得加载与更新 CSS 成为了整个 Vite 应用的性能瓶颈

2. Windi CSS

   • Windi CSS 是从零开始编写的 Tailwind CSS 的替代方案。它的零依赖，也不要求用户安装 PostCSS 和 Autoprefixer。更为重要的是，它支持 按需生成。Windi CSS 不会一次生成所有的 CSS，而是只会生成你在代码中实际使用到的原子化 CSS。这与 Vite 按需使用的理念不谋而合，也因此，我为它编写了 一个 Vite 插件。不出所料，从一个简单的测试上可以看到它比 Tailwind 要快了 20~100 倍。

3. UnoCSS

   • 具有高性能且极具灵活性的即时原子化 CSS 引擎
   • UnoCSS 是一个引擎，而非一款框架，因为它并未提供核心工具类，所有功能可以通过预设和内联配置提供
   • UnoCSS 仍处于实验阶段，但由于其精简的设计，生成的结果已经非常可靠了；需要注意的一点是，API 还没有最终定案
   • 它并非被设计成 Windi CSS 或 Tailwind 的替代品（考虑等待 Windi CSS v4），不建议将现有项目完全迁移到 UnoCSS。可以在新的项目中试用它，或者将它作为你现有 CSS 框架的补充（例如，禁用默认预设，只使用纯 CSS 图标的预设，或者自定义你的规则）

4. Fower

   • Fower 是一个高效开发 UI 的样式工具库，目标是让写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utility-first)、类型安全(Type Safe)、CSS in JS，它非常注重开发体验，让用户快速且开心的开发界面
   • 不依赖任何框架，可与React，Vue，React native，小程序等框架一起使用