谈谈 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写法：
<button class="btn">Submit</button>
使用原子化CSS写法：
<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文件中存在大量重复的代码，比如：
.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片段，就像这样：
.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 重写了我的博客，简单谈谈我的使用感受。
-
再也不用花时间考虑命名，这简直太爽了！想要某个样式，只需要直接使用相应的类名，完全不需要担心命名冲突或纠结于选择合适的类名。
<div class="mt-2 relative flex items-center border-0 rounded"></div> -
非常适合开发响应式和暗黑模式。之前为了让博客支持响应式和暗黑模式，我需要写许多的媒体查询和CSS变量来完成，但是使用原子化 CSS，我只需根据需要添加相应的类名即可。比如：
<div class="w-16 md:w-32 lg:w-48 bg-white dark:bg-black"></div>仅仅一行代码就实现了在不同大小的屏幕下，给容器设置不同的宽度，同时还支持在暗黑模式切换不同的背景。
-
Tailwind CSS 遵循一套严格的设计规范和约定，适合没有设计稿的需求。由于之前没有设计约束，项目中颜色五花八门，出现了各种大小的字体和圆角等，导致最终呈现的效果不太理想。而使用 Tailwind CSS 提供的设计规范后，网站也更符合设计要求了。
<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。如果你还不放心，你可以先在一个项目中尝试使用，感受一下它的优势和缺点。
往期文章推荐：