自我学编程以来,一直在围绕Web运用打转,而Web运用绕不开的一个问题就是UI设计。18年以前我都是自己设计UI,然后用原生HTML+CSS实现。但18年之后,我就很少自己写原生的了,原因有两个,一是维护成本高,二是时间有限

于是就开始用UI框架,前后主要用过Bootstrap、Bulma、Tailwindcss三个框架,中途还自己封装了一个,但功能不是很完善,就废弃了,还是用主流的开源框架省事。

以下对我用过的几个前端UI框架,做一个简单对比,基本所有框架都是为了,解决修饰样式颗粒度的问题,以下是三种不同程度的颗粒度:

<div class="rounded-lg p-4"> Click </div> 
<div class="button"> Click </div> 
<Button> Click </Button>

Tailwindcss属于第一种,Bootstrap、Bulma属于第二种,ElementUI、AntDesign之类的属于第三种。当然第三种组件类框架,需要结合Vue或者React才能用,以后有机会再单独讨论。

一、Bootstrap

Twitter推出的一个用于前端开发的开源工具包,是目前最受欢迎的前端框架。目前这一版本的『陈华编程』网站,就是用Bootstrap写的,确实能大大加快开发速度,说不上好看,但也不是很丑,中规中矩吧。

二、Bulma

我最早知道这个框架,是看阮一峰的一篇博文:https://www.ruanyifeng.com/blog/2017/10/bulma.html

看配色比Bootstrap更有活力一些,就深入研究了一下。也挺好用,就是没有默认的js效果,需要自己补充,但确实比Bootstrap好看

三、Tailwindcss

这是我最近才开始研究的一个框架,而且越研究越觉得这才是我想要的。之前用Bootstrap之类,总会觉得被掣肘,比如嫌按钮太大想调整,会非常困难。但用Tailwindcss就会很灵活,没有默认组件,全部自定义

但也正是因为Tailwindcss的最小原子化的特征,被很多人吐槽说:这不就是行内样式吗?更多细节,可以参考 知乎 @山月 https://www.zhihu.com/question/337939566/answer/789979048

其实,Tailwindcss是提供了最小原子化的方案,如果你想封装成类似Bootstrap的class样式,也可以用@apply轻松实现。所以目前我用过的前端UI框架中,Tailwindcss是我觉得最灵活的,不出意外的话,我后面开发项目,都会用这个框架。

其他

除以上几个框架之外,我中途还零散的用过几个框架,比如Uikit、Layui和SemanticUI,都大同小异,感兴趣的都可以去了解。编程圈知名博主廖雪峰的个人网站,就是用Uikit搭建的,并且在他的Python3实战课程用到:https://www.liaoxuefeng.com/wiki/1016959663602400/1018490938509760

最后说明一点,前端UI框架虽然好用,但并不是万能的,他们有一个共有的问题就是:到底是设计图主导,还是框架主导。如果是在公司,有专业的UI设计做好了效果图,让你用代码实现,而且要求尺寸、颜色和设计图完全一致,那用框架就会很麻烦,要重写一大堆框架的默认样式,才能实现,那还不如用原生代码实现了。

所以,前端UI框架,特别适合像我这种时间有限的、不会设计的个人开发者,可以快速开发出美观大气的网页效果。

课程

关于Tailwindcss的使用方法,我录了一套《Tailwindcss实战商城模板》课程,欢迎订阅:

https://study.163.com/course/introduction/1212164821.htm

本文为 陈华 原创,欢迎转载,但请注明出处:http://code.ichenhua.cn/read/205