谈谈 Atomic CSS 及使用

最近几年，原子化CSS在Web开发中越来越受欢迎，越来越多的人开始采用这种方法。本文将和你一起聊聊原子化CSS。

什么是原子化CSS

在 Let's Define Exactly What Atomic CSS is 一文中，John Polacek 这样定义原子化CSS：

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

译文：原子化 CSS 是一种 CSS 架构方法，它倾向于使用基于视觉功能的、小巧且单一目的的类。

我们通过一个简单的例子来解释一下这个概念：

传统的CSS写法：

html 复制代码

<button class="btn">Submit</button>

使用原子化CSS写法：

html 复制代码

<button class="rounded text-sm py-2 px-4 bg-slate-900 text-white hover:bg-slate-700">Submit</button>

传统的CSS开发中，我们通常把多个样式写在一个 .btn 类中，而原子化CSS则是使用多个功能单一的类来组合，以取代 .btn 类。

原子化的优势

在讨论为什么要使用原子化CSS之前，让我们想一想在编写CSS时可能遇到的问题。

1. 命名困难

在计算机科学中，只有两件事很难：命名和缓存失效。- Phil Karlton

CSS类名和变量名的命名，对许多开发者来说都是一个困扰。

我常常为是否使用 .title 还是 .header，.current 还是 .active 纠结不已，尤其是对于词汇量有限的我来说，命名所花费的时间甚至比编写业务代码还多。

2. 样式冲突问题

在项目开发中，样式冲突是一个常见的问题。当不同的 CSS 样式规则应用到相同的元素上时，就可能出现样式冲突，导致页面显示异常。

为了解决样式冲突问题，出现了许多解决方案，比如Vue中的CSS scoped属性、ElementUI采用的BEM命名规范等，但它们也会引入其他副作用。

3. 样式难以复用

随着项目越来越复杂，CSS文件也会变得越来越庞大。如果仔细观察，你会发现CSS文件中存在大量重复的代码，比如：

css 复制代码

.box {
  display:flex;
  align-items:center;
  flex-direction:column;
  border-radius:2px;
  background-color: #fff;
}

.icon-btn {
  display:flex;
  align-items:center;
  position:relative;
  cursor:pointer;
  border-radius:2px;
}

.submit-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background-color: #fff;
}

如果能合理复用样式，将会大大减小CSS文件体积。

原子化方案

为了解决传统CSS开发中遇到的这些问题，原子化CSS提供了一套解决方案：停止编写CSS。当然，这并不意味着不编写CSS，而是不需要为每个元素编写独立的样式。

我刚开始学习 CSS 的时候，我喜欢给每个项目添加一个 basic.css 文件，里面除了一些与 reset 相关的样式之外，还有许多CSS片段，就像这样：

css 复制代码

.tl {
  text-align: left;
}

.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

这看起来很像原子化 CSS，但原子化 CSS 比这更强大。

原子化CSS的优势在于它提供了一套语义化的、功能单一的原子类，通过组合这些类来实现样式效果。由于原子类的单一功能性，它们之间没有依赖或冲突，可以灵活组合使用，实现样式复用和减小CSS文件体积。

此外，原子化CSS它是语义化的，通过类名很容易预测样式结果，减少了编写和调试样式的时间。

市面上有很多原子化 CSS 框架，如 Windi CSS，Tailwind CSS 以及 UnoCSS 等。如果你对此感兴趣，推荐你阅读 AntFu 的文章《重新构想原子化 CSS》。

使用感受

最近我使用 Tailwind CSS 重写了我的博客，简单谈谈我的使用感受。

再也不用花时间考虑命名，这简直太爽了！想要某个样式，只需要直接使用相应的类名，完全不需要担心命名冲突或纠结于选择合适的类名。
html 复制代码
```
<div class="mt-2 relative flex items-center border-0 rounded"></div>
```
非常适合开发响应式 和暗黑模式。之前为了让博客支持响应式和暗黑模式，我需要写许多的媒体查询和CSS变量来完成，但是使用原子化 CSS，我只需根据需要添加相应的类名即可。比如：
html 复制代码
```
<div class="w-16 md:w-32 lg:w-48 bg-white dark:bg-black"></div>
```
仅仅一行代码就实现了在不同大小的屏幕下，给容器设置不同的宽度，同时还支持在暗黑模式切换不同的背景。
Tailwind CSS 遵循一套严格的设计规范和约定，适合没有设计稿的需求。由于之前没有设计约束，项目中颜色五花八门，出现了各种大小的字体和圆角等，导致最终呈现的效果不太理想。而使用 Tailwind CSS 提供的设计规范后，网站也更符合设计要求了。
html 复制代码
```
<p class="text-slate-500">text corlor rgb(248,250,252)</p>
<p class="text-slate-500/80">text corlor rgba(248,250,252,0.8)</p>
<p class="bg-slate-950">background color rgb(2,6,23)</p>
```

当然，在使用过程中也发现了一些问题，比如：

增加了学习成本。对于刚接触原子化 CSS 的人来说，理解和掌握原子类的使用可能需要一些时间和练习。
HTML 结构变得复杂。由于需要将多个原子类组合在一个元素上，HTML 结构可能会变得臃肿，不够简洁和优雅。

刚开始使用的时候我很不适应，几乎每个样式都需要查询，好在Tailwind CSS 提供了非常详细的文档，并且 VSCode 也有相关的提示插件，没用多久我就很熟练的使用了。

总体而言，原子化CSS给我带来的优势大于不足，现在我已经离不开它了。

最后

如果你遇到了命名困难、样式冲突和样式复用等问题，我推荐你去尝试一下原子化CSS。如果你还不放心，你可以先在一个项目中尝试使用，感受一下它的优势和缺点。

往期文章推荐：