原子化真的是现代前端CSS的救星吗

本文作者系360奇舞团前端开发工程师

文章标题：从 Tailwind CSS 到 UnoCSS —— 原子化真的是现代前端CSS的救星吗

小编前言

追忆往昔，穿越前朝，CSS也是当年前端三剑客之一，风光的很，随着前端跳跃式的变革，CSS在现代前端开发中似乎有点默默无闻起来。

不得不说当看到UnoCss之前，我甚至都还没听过原子化CSS^[1]这个概念（不够卷，惭愧，惭愧），很久没关注过CSS相关的内容了。

原子化CSS本身的概念和 Tailwind CSS、UnoCSS^[2] 设计都比较简单，这里主要想聊一下在现代前端中，原子化CSS到底是不是完美的解决方案，是不是解决CSS问题的正确方向。

概念-原子化CSS

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

听起来厉害，但实现的最终方式超级简单，核心就是预置一大堆 class 样式，尽量将这些 class 样式简单化、单一化，在开发过程中，可以直接在 DOM 中写预置好的 class 名快速实现样式，而不需要每次写简单枯燥大量的 css 样式，如下代码所示：

1. 先预置一组class列表

.m-10 { margin: 10px; }
.p-5 { padding: 5px; }
.text-red { color: red; }
 // 无数个....

1. 编码时在dom中直接写class名，快速实现样式

<div class="m-10 p-5 text-red">
  测试dom
</div>

而预置的class列表中的样式，有着一定的规律，开发者可以通过学习快速掌握，利用多个class在dom中的组合快速实现效果