原子化CSS与CSS预编译器的对比

前言

        本文章将从多个角度来分析对比原子化css（文中以Unocss为例）和CSS预编译器（以sass为例）。

什么是原子化css？

        想象一下，你要搭积木盖房子。原子化CSS就像是一堆特别小的积木块，每个积木块都只能干一件很简单的事儿。比如说，有个小积木块就只能让字变成红色，还有个小积木块就只能把背景弄成蓝色。你要盖一个好看的房子（也就是做出一个网页样式），就得把这些小积木块一个一个组合起来。像这样的小积木块对应的就是原子化CSS里那些一个个小的类（class）。

        用专业的话来说：

        原子化CSS倾向于创建小巧且单一用途的class，并以视觉效果进行命名。例如，一个类可能只负责设置文本颜色为白色，另一个类可能只负责将文本居中对齐。通过组合这些单一用途的类，可以构建出复杂的UI样式，而不需要为每个组件单独编写样式。

        常见的原子化css框架有Unocss、Tailwind CSS以及Windi CSS等。

CSS预编译器又是什么鬼呢？

        CSS预编译器就像是一个魔法盒。你把普通的CSS规则放进去，它就能给你变出新花样。比如说，你可以告诉这个魔法盒，“我想要一个代表主要颜色的东西”，然后你在魔法盒里定义一个变量（就像给这个颜色取个名字），以后只要用到这个颜色，就直接用这个变量名就行。而且这个魔法盒还能让你把CSS规则像套娃一样一层套一层（这就是嵌套），还能把一些常用的样式组合成一个新的样式，就像把几个小魔法组合成一个大魔法（这就是混合）。

        CSS预编译器对于前端开发者应该并不陌生，常见的有sass、less、stylus。

样式编写方式对比

原子化css：

就像我刚刚说的搭积木。你在HTML里就一个劲儿地往元素上堆那些小积木块的类名。比如说你有个<div>标签，你想让它里面的字是白色，背景是黑色，还居中，你就写<div class = "白色字的类名 黑色背景的类名 居中的类名">。这些类名都是原子化CSS预先定义好的，每个类名就负责一个很简单的样式效果，例如：

<div class="text-white bg-black text-center">hello Atomic CSS</div>

眼熟？对，和以前的bootstrap的写法很像。

CSS预编译器：

你得先在那个魔法盒（预编译器的文件）里捣鼓。比如说你用Sass，你可能会先写个类似$mainColor: red;（定义一个变量表示主要颜色是红色），然后再写一个样式块，像这样：

$mainColor: red;

.myDiv {
    color: $mainColor;
    background-color: black;
    text-align: center;
}

然后这个样式会被编译成普通的CSS给浏览器看。

样式复用方面对比

原子化CSS：

        那些小积木块（原子类）是全局的，到处都能使。不管你是做网页的头部、中部还是底部，复用性强。

CSS预编译器：

        复用的话，就靠那些你在魔法盒里捣鼓出来的东西。通过定义变量、混合等方式实现复用。

性能方面对比

原子化CSS：

        可以实现按需加载，只生成实际使用到的样式，减小CSS文件体积。

CSS预编译器：

       通常需要编译整个样式文件，可能包含未使用的样式代码，体积可能较大。

灵活性对比

原子化CSS：

        有点死脑筋。要是你想做个特别复杂的样式，比如说一个菜单，菜单里的子菜单有特殊的样式，你可能得写好多小积木块的类名堆在一起。就像你要搭一个超级复杂的城堡，可能得用好多好多小积木块，而且还得小心翼翼地组合，不然就容易乱套。

CSS预编译器：

       灵活性高。因为它有那些像变量、嵌套、混合之类的魔法手段。

局限性

原子化CSS：

        可读性低：HTML中大量类名可能导致代码可读性下降

        灵活性有限：对于复杂嵌套或特定交互样式不够方便。

        难以调试：样式问题排查时，需要逐个排查相关类名。

CSS预编译器：

        学习曲线较高：需要学习预处理器的语法，如Sass的变量、嵌套规则、混合等。

        编译依赖：CSS预编译器需要编译成普通的CSS才能被浏览器识别，这意味着在开发过程中需要依赖编译工具。

        性能问题：如果不合理使用，可能会导致生成的CSS文件体积过大，从而影响页面的加载速度。

总结

        各有优劣，该怎么选呢？各位就仁者见仁智者见智了。

        不过小编更想二者结合使用，如果一些常用的基本样式用unocss，比如常用的width、height、margin、padding、text-align:center、cursor:pointer，其他跟业务相关的用sass，是否可行呢？