从尾风CSS到UNOCS-雾化真的是前端CSS的救星
#javascript #css #react #vue

在前面写

回顾过去并穿越以前的王朝，CSS也是当时三个前端剑客之一，这给人留下了深刻的印象。随着前端的跨越转变，CSS在现代前端发展中似乎有些不知所措。

必须说，在看到UnoCSS之前，我什至没有听说过雾化CSS的概念（ham愧，羞愧），并且很长一段时间都没有遵循CSS相关的内容。

Atomized CSS本身的概念以及尾风CSS和UNOCS的设计相对简单。在这里，我们主要想谈论雾化的CSS是否是现代前端的完美解决方案，也是解决CSS问题的正确方向。

原子CSS

原子CSS是CSS体系结构的方法，该方法有利于基于视觉功能的名称的小型单用途类。

听起来很棒，但是最终的实现方法非常简单。核心是预设大量的课程样式，并尝试尽可能简化和简化这些类样式。在开发过程中，您可以直接在DOM中编写预设类名称以快速实现样式，而无需每次编写很多简单且无聊的CSS样式，如以下代码：

所示。
  1. 预先设置一组课程列表 
.m-10 { margin: 10px; }
.p-5 { padding: 5px; }
.text-red { color: red; }
 // more....
  1. 在编码过程中直接在DOM中写入类名称以快速实现样式 
<div class="m-10 p-5 text-red">
    dom
</div>

预设类列表中的样式具有某些模式，开发人员可以通过学习和使用DOM中多个类的组合来快速掌握它们，以快速实现结果

ð®ð®ï¼看起来有点熟悉吗？ （死者 bootstrap 攻击了我），所以您认为这是冷米炒还是实用主义？

尾风CSS广泛流行

Cover image for 4 Reasons why I start using Tailwind CSS in every project

github在[parwindcss]•到目前为止，到目前为止，已经有'70 .8k'明星，起初，我简直不敢相信它是如此受欢迎，每周下载超过600万。

tailwind CSS倡导者允许您快速构建网站而不离开HTML，并且具有许多非常实用的优势：

  • 类的极端封装以最大化可重复性
  • 各种易于扩展的可自定义配置
  • 在施工期间，明确未参考的CSS样式解决了生产环境中CSS冗余的问题
  • 舒适的响应迅速发展经验
  • 功能，指令，布局，动画....
    • 上

它几乎涵盖了开发人员在日常本地CSS开发中遇到的所有头痛和不舒服的发展经历，因此它确实是一种非常实用的工具。 Tailwind CSS确实使前端开发人员受益。

tailwind CSS可以用作前端构造工具链中的邮政信箱插件，并结合其他预处理方法来优化CSS生产产品。

unocss

在过去的几年中，

tailwind CSS在过去的两年中一直广受欢迎，“ unocss”再次脱颖而出。在这里，我们首先需要在UNOCSS官方网站上赞美图标，文本和背景颜色梯度链接主题。
很酷！

Cover image for UnoCSS, Vite + Vue3 easy setup

根据UNOCSS的作者， unocss并不是要替换tailwind CSS，而是要从另一个角度将Atomized CSS完美地整合到业务中。。

UNOCSS的作者是Vite团队的成员，我相信这正是因为作为Vite的开发人员，他对工程构建具有很高的敏感性，因此Unocss的创建是为了将雾化性CS与前端工程集成在一起极端。

那么unocss做了什么

  • 需求生成
    • 生成企业真正使用的类，并在开发和生产环境中使用它们
    • 与Tailwind CSS相比，CSS仅在生产阶段清除了未参考的代码，UNOCS还通过文件监控和在开发阶段的按需传输实现更快的性能（尽管已经快速，甚至更快，甚至更快的速度是一个改进）

image-20230803213902695

image-20230803213919428

  • 高度灵活

    • unocss将自己定位为CSS发动机，而不是框架，因此它应该与CSS具有包容性关系。 UNOCS是统治者，而后风CS可以用作一组预设

      import UnocssPlugin from '@unocss/vite'

import PresetTachyons from '@unocss/preset-tachyons'
import PresetBootstrap from '@unocss/preset-bootstrap'
import PresetTailwind from '@unocss/preset-tailwind'
import PresetWindi from '@unocss/preset-windi'
import PresetAntfu from '@antfu/oh-my-cool-unocss-preset'

export default {
  plugins: [
    UnocssPlugin({
      presets: [
        // PresetTachyons,
        PresetBootstrap,
        // PresetTailwind,
        // PresetWindi,
        // PresetAntfu
        // 选择其中一个...或多个！
      ]
    })
  ]
}

    • 简化类命名

      // Distinguish lengthy calss by type for easier reading and understanding
<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>

// Change to
<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

    • 在自定义规则方面，UNOCS提供了更灵活的静态和动态匹配规则

    • 进一步优化汇编（例如不再解析AST），导致生产速度进一步提高

unocss等同于构建高级引擎，将来，新的原子CSS框架也可以兼容，为您节省了选择的困难。

雾化CSS不是现代前端CSS的救星

尾风CS和UNOCS的特征和使用方法不是本文的主要重点。您可以参考官方网站以获取具体详细信息。在这里，我们主要想讨论

将对CSS或UNOCS的CSS进行雾化，是CSS问题现代前端解决方案的最佳实践

我认为答案是没有的

从我的直接感知来看，雾化的CSS更像是辅助工具工具，而不是解决CSS问题的解决方案。作为一种辅助工具，它确实可以在某些业务场景或业务发展阶段提供极大的帮助，但是从整个综合体和不断变化的前端业务情况的角度来看，其功能受到限制。

。

  • 最直观的结果是，当业务的复杂性增加到某个阶段时，雾化CSS的成本效益将大幅下降，从而导致HTML代码的冗余，不良的可读性和维护难度，这将直接影响业务发展。

  • 尤其是现在，Vue的单个文件组件和React的功能组件都将一些JS逻辑注入HTML。如果还需要通过班级名称组合注入CSS逻辑，那就太令人困惑了。

  • 但是，Vue或React各自的组件化设计思想可以通过各自的组件分割来解决代码冗余的问题，使其适用于各种简单且复杂的业务场景，这是一套完整的最佳实践集。雾化的CSS不能进行组件化分割，因此随着业务复杂性的提高，代码冗余将迟早发生，这直接限制了此类框架的普及，因此它不能作为前端CSS问题的基本解决方案

从设计的角度来看，原子CSS似乎也与当前组件和功能编程的主流不同。

适用的方案

在某些简单的业务方案中，原子CSS确实具有很大的优势，例如快速发展响应式H5，后端系统中的业务复杂性低以及简单的官方网站页面。

在某些复杂的业务场景中，例如复杂的C-End业务，大型系统不再适合。

参考文章

Reimagine Atomic CSS