前端开发所用的工具和框架真的是五花八门，各种各样。光是和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 Bootstrap、NG-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:

网文参考

图标资源

（完）

2019-10-04更新

JS：

CSS:

Others:

（更新完）