Atom CSS 是什么？
Atom CSS：原子CSS，意思是一个类只干一件事。
不同于大家常用的BEM这类规则，原子css就是拆分，所有 CSS 类都有一个唯一的 CSS 规则。例如如下
.w-full{
width:100%;
}
.h-full{
height:100%;
}
而像这种就不是
.w&h-full{
width:100%;
height:100%;
}
当我们使用的时候，直接写class名就可以
<html>
<body>
<div id="app" class="w-full h-full">
</div>
</body>
</html>
原子CSS的优缺点
- 优点
- 减少了css体积，提高了css复用
- 减少起名的复杂度
- 缺点
- 增加了记忆成本。将css拆分为原子之后，你势必要记住一些class才能书写，哪怕tailwindcss提供了完善的工具链，你写background，也要记住开头是bg。
- 增加了html结构的复杂性。当整个dom都是这样class名，势必会带来调试的麻烦，有的时候很难定位具体css问题
- 你仍需要起class名。对于大部分属性而言，你可以只用到center,auto，100%，这些值，但是有时候你仍需要设定不一样的参数值，例如left，top，这时候你还需要起一个class名
