我为什么喜欢原子化CSS

用Unocss已经有几个月了，从使用者的角度来说说我为什么喜欢上了原子化css。

类似“原子化css”的概念其实很早之前就有，比如Bootstrap的css工具类已经很接近现在的原子化css框架提供的功能，只不过这些css类一是随UI框架自带，二是覆盖的范围不够全面。现在的“原子化”实际上也并不是只对应单条的css属性，更像是一种功能上的原子化，比如truncate实际上包含了三条css属性：

{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

这条规则可以实现单行文本长度超出部分显示成省略号。（当然也有单独的text-ellipsis，只包含了text-overflow: ellipsis属性）。

目前我感受到的原子化css优点有：

1. 免去起名烦恼。用了Unocss后大部分情况下我都不用再去想class名。之前也尝试过各种css命名方法，包括BEM。然而当html层级嵌套比较深的情况下，BEM命名法也会有起名难、不直观的缺陷。当使用<style scoped>时，BEM除了表达语义外好像也起不到更多作用了，毕竟scoped就已经将不同作用域的样式隔离。
2. 便于样式的统一。在传统css/scss/less中我们也可以通过自定义变量来达到统一全局样式的目的。但是在原子化css中可以有更简单的方式。通过自定义的presets等就可以实现。配合vscode插件，也能有更直观的显示。
3. 减少代码量。主要是减少开发时的代码量，不用再写冗长的css。同时对于高频出现的css变量也可以自定义别名，用更短的缩写。同时对于打包后的css的体积，其实也会更小，相同的css类会被复用。

但原子化css也不是没有缺点的，目前我感受到的缺点有：

1. 调试代码时不直观。毕竟样式全部写到html标签中，会造成标签很长。同时在调试时，不方便找到对应的html节点。以前可以直接通过类名在代码中找到对应html结构，现在需要花费一些时间才能找到。
2. 父组件对于子组件的样式难以修改。如果一个div样式全部是用原子化css写的，当你想在父组件中修改该div时，会更难修改。以前可以直接通过深度选择器进行修改，然而现在没有了类名，修改就成了一件难事。
3. 增加记忆成本。这一点对我来说其实不算缺点，因为绝大部分的css类都是很符合直觉的，比如justify-content: space-between就可以很直观地想到justify-between。当然对于一些不常用的css属性，也可以直接到官网去查，基本上同一css用三遍之后就很难忘掉了。

原子化css，对我而言，利大于弊。对于上面缺点中的第2点，实际上也有相应的解决方案：@apply指令。然而使用@apply后，又会有class起名的问题，同时打包后的css体积会大那么一丢丢。但是对我而言仍然是利大于弊。

最后大家也可以看看托尼老师从开发者角度对于原子化css的一些思考重新构想原子化CSS - antfu