讲起原子化就绕不开雅虎,雅虎提出了原子化的设计思路并实现了ACSS(Atomic CSS),通过一个属性一个类的形式做到了问题的快速排查、css代码足够精简、组件高灵活性,但是同时面临使用属性描述类名而非语意化自然语言造成的理解困难,还有就是相当于在html中直接做了显示设置。不利于HTML和CSS的解耦。正因为各种的缺点所以原子化设计逐渐被大家所抛弃(1.2K的Star),我们也很少在各种项目中见到原子设计的身影,直到Tailwind的流行,这难道是天道有轮回吗?
Tailwind css对原子化做了什么改进
- 着眼于现代化的前端技术,默认单位为
rem
而非px
- 丰富的预设,预设字体大小,丰富的颜色
- 响应式设计,提供一系列断点判断
- 方便扩展,根据你的项目需要,自定义相关的原子类
- 兼容各大框架,并有详细说明
香吗?
- 这样写代码容易被咒骂,增加了将来维护者的学习陈本
- 每写一个属性都得仔细斟酌,防止写出无效代码
- 让你家UI换个软件,不然你就自己换算🤣
所以如果是团队协助的项目不建议,或者整个团队都能接受这种工作方式愿意去学习,否则自己写着玩的这种就随意,各种发挥。