走马观花看现如今流行的CSS框架

Fri 24 May 2019 / In categories Web

CSS

前端开发所用的工具和框架真的是五花八门,各种各样。光是和CSS相关的,就不计其数,本文试图对CSS相关的框架加以收集和整理,使选择CSS框架的时候思路更清晰一点。

行业翘楚

首先是几个长胜不衰的超级大牌,也就是这个行当里的明星:

对上面的几款框架做一个简单的分析。首先,前端肯定是需要一个CSS框架的,来提供基本的样式,还有基本的组件。毕竟大家都不愿意从空白的页面开始设计CSS。

这样基本的样式定义了基本的排版、布局、常用CSS类等待。除了样式之外,还有预制的组件(比如按键、表单等)可以帮助开发者快速构建Web界面。同时这些框架还要提供一定扩展性,让开发者可以进行一些自定义。另外,针对不同的应用场景,这些框架还提供定制化的主题可供选择。

可以看到,这些框架或多或少都是一些大厂的身影。Bootstrap身后是Twitter,Materialize身后是谷歌提倡的Materlize设计理念。Bulma身后虽然没有大厂,但是它一直对标的是Bootstrap,试图做到比Bootstrap轻量、前卫。

各自为战

但是一种框架肯定无法全盘通吃。一种CSS框架必定会带有一种风格,更要命的是,由于CSS是用来定义Web的样式的,所以这种样式一定会从视觉上体现出来。有时候你看到一个网站,你可能会有这样的反应:“啊!又一个Bootstrap做的网站”。

为了避免上面的尴尬,有头有脸的厂子都会推出自己的框架,表明自己的风格,所以我们又有了一堆CSS框架:

这实在是前端设计师之福,他们就像18、19世纪的画家。那时候的头面人物总喜欢请人画像,现在的头面人物总是需要请前端设计师来设计自己的风格的。

做大做强

但是光有CSS还没有办法做成一个Web页面,这通常还需要HTML和Javascript的帮助。但是HTML和Javascript有自己的框架,比如流行的ReactJS、Angular、VueJS等这些JS框架。

于是乎就是有CSS框架和JS框架就有了结合的需求,就像婚姻。于是乎就有了React BootstrapNG-LIGHTNING以及Semantic UI React这种结合体。

但就就像是婚姻中的男女一样,谁都不希望和对方绑得太死,谁都想有更多的结合的可能性。于是Bootstrap即可以搭配React、也可以搭配Angular。对于React来说,能和它搭配的CSS框架也很多:

像React这种JS框架中的高富帅,想跟他攀亲的CSS框架实在是太多了,有的框架干脆就只为React设计,比如:

这些框架互相竞争,有着不同的目的。Material UI比较偏向普适;Blueprint JS适合桌面,同时偏向呈现数据;react virtualized主要是为了数据呈现;react-desktop倾向于模拟macOS和Windows的UI;Evergreen面向于企业常用的场景;grommet则是优先重视移动端的体验;rebass则是别出新意,把CSS嵌入JS等待。

上面这些框架的体量也有很大的差别,大的可能打包后几百KB,小的可能只有几KB。primaryobjects/css-comparison.csv对一些框架打包后的大小做了对比。

欲罢不能

使用了框架之后,可能会产生一种感觉,就是欲罢不能。设计不好(或者故意设计太好)的框架很容易把使用者强烈地跟自己绑定在一起。虽然很多框架使用SASS、LESS、Stylus这些预处理器来生成CSS文件,用户可以对此做一些自定义。但有一些深入骨髓的东西可能会让人欲罢不能。比如Semantic-UI就没办法摆脱jQuery。medium上有一个妹子对Semantic-UI的吐槽,就是受了欲罢不能的苦。有深入骨髓的东西可能需要代际变化才能摆脱。比如Bootstrap经历了4代,抛弃了不少原先的设计,才能历久弥新。

很多时候需要考虑一下,需要使用那么大、功能那么全、依赖那么多,同时支持CSS和JS的框架吗?或许可以从一下小的框架开始,下面就是不错的CSS框架选项:

对于JS框架,其实也有一些选项:

尾记

List of CSS Frameworks:

网文参考

图标资源

(完)

Load Disqus Comments