如今的 CSS 前端框架的发展非常迅猛，但是真正好的框架不多。在这篇文章中，我将对我认为当今***的 5 个框架进行比较。每个框架都有它自己的强项和弱项，以及适合的领域，你需要根据这些特点来进行选择。例如，如果你的项目很简单，那就没有必要选择复杂的框架。此外，还有一些选项是模块化，这样你就可以根据需要选择所需的组件，或者来自不同框架混合的组件。
我选择的这些框架是根据它们在 Github 的受欢迎程度来的，而***的毫无疑问是 Bootstrap。
(注意：文章中的一些数据日新月异，例如 Github 上点赞数、版本号等等。当你阅读这篇文章应该意识到这些问题)
Bootstrap
Bootstrap 毫无争议是今天最领先的前端框架。鉴于其超级强大的人气，而且每天都还在不断增长，你可以这个框架是非常棒的，不会让你失望。
- 作者:Mark Otto and Jacob Thornton.
- 发布时间: 2011
- 当前版本: 3.3.7
- 普及程序: 在 Github 上获得 111,000 个点赞
- 描述: “Bootstrap 是***的 HTML、CSS 和 JavaScript 框架，用于开发响应式、移动优先的 Web 应用”
- 核心概念:RWD 以及移动优先
- 框架体积: 154 KB
- 预处理器:Less and Sass
- 响应式: Yes
- 模块化: Yes
- 支持模板和布局?: Yes
- 图标集:Glyphicons Halflings set
- 插件/扩展: 没有绑定，但是很多第三方的可以选择
- 独特的组件: Jumbotron
- 文档: Good
- 定制: 基本的 GUI 定制工具，不行的是你需要手工输入颜色值，因为没有提供颜色拾取器
- 浏览器支持: Firefox, Chrome, Safari, IE8+ (IE 8 需要 Respond.js )
- 许可证:MIT
Bootstrap 注意事项
Bootstrap ***的优势是其普及的程度。技术上来说，它不一定比这个列表上的其他框架更好，但是它比其他框架提供了更多的资源(包括文章、教程、第三方插件和扩展，主题构建等等)。简单来说，Bootstrap 使用广泛，这是人们继续选择它的主要原因。
(注意: 这里的 “独特组件” 的意思是与其他框架比较的)
2. Foundation (来自 ZURB)
Foundation 在这份列表中是第二大选择。有了一个坚实的公司 ZURB 做背书，该框架有一个真正强大、而且很棒的基础。此外，有很多大网站在使用该框架，包括：Facebook, Mozilla, Ebay, Yahoo! 以及国家地理杂志等等。
- 所属: ZURB
- 发布时间: 2011
- 当前时间:6.3.1
- 受欢迎程度: 在 Github 收获 25,400 个点赞
- 描述: “***级的响应式前端框架”
- 核心概念: RWD, 移动优先，语义化
- 框架体积: 197.5 KB
- 预处理器: Sass
- 响应式: Yes
- 模块化: Yes
- 模板/布局: Yes
- 图标集:Foundation Icon Fonts
- 插件/扩展: Yes
- 独特组件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
- 文档: 好，提供很多额外资源
- 定制: 基本的 GUI 定制器，类似 Bootstrap 那款
- 浏览器支持: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
- 许可证: MIT
Foundation 备注
Foundation 是一个真正专业的框架，提供商业支持和咨询服务。同时提供很多资源去帮你快速轻松的学习和使用该框架。
3. Semantic UI
Semantic UI 一直在持续发展，构建更具语义的 Web 网站。其利用自然语言原则，使得代码更加具备可读性和易于理解。
- 作者:Jack Lukic
- 发布时间: 2013
- 当前版本: 2.2
- 受欢迎程度: 在 Github 上获得 34,762 个赞
- 项目描述: “一个 UI 组件框架，基于自然语言特点”
- 核心概念: 语义、标签、响应式
- 框架提及: 806 KB
- 预处理器: Less
- 响应式: Yes
- 模块化: Yes
- 模板布局: 支持，提供一些基础模板
- 图标集: Font Awesome
- 扩展、插件: No
- 独特组件: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
- 文档: 非常棒，组织良好，提供入门、定制和主题创建.
- 定制: 不提供 GUI 定制器，只有手工定制
- 浏览器支持: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
- 许可证: MIT
Semantic UI 注意事项
Semantic 是***创新以及全功能的框架。框架的整体结构和命名都有明确的逻辑和语义，在这方面碾压其他框架。
4. Pure 来自 Yahoo!
Pure 是一个轻量级、模块化的框架，使用纯 CSS 编写，其包括的所有组件都可以在一起或者单独使用。
- 所属: Yahoo
- 发布时间: 2013
- 当前版本: 0.6.2
- 受欢迎程度: 在 Github 收获 16,637 个点赞
- 描述: “一组小的、响应式的 CSS 模块，可以用于任一 Web 项目”
- 核心概念:SMACSS, 极简主义.
- 框架提及: 16 KB
- 预处理器: None
- 响应式: Yes
- 模块化: Yes
- 模板/布局: Yes
- 图标集合: 无，你可以使用 Font Awesome .
- 插件/扩展: None
- 独特组件: None
- 文档: 好
- 定制: 基本的 GUI 皮肤构建器
浏览器支持: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
许可证:Yahoo! Inc. BSD
Pure 备注说明
Pure 只提供了很简单的基本骨架，这对很多不需要一个全功能框架的人来说是非常棒的。
5. UIkit 来自 YOOtheme
UIkit 是一个易于使用和定制的简单组件集合。虽然与其竞争对手比较，受欢迎程度没那么高，但是它同样提供了相同的功能和质量。
- 所属:YOOtheme
- 发布时间: 2013
- 当前版本: 3.0.0
- 受欢迎程度: 在 Github 收获 9,422 个点赞
- 描述: “一个轻量级模块化的前端框架，用于快速开发强大的 Web 界面”
- 核心概念: RWD, 移动优先
- 框架提及: 326.9 KB (384.4 KB 如果包含 uikit-icons.min.js 和相关 SVG 图标时)
- 预处理器: Less, Sass
- 响应式: Yes
- 模块化: Yes
- 模板/布局: Yes
- 图标集: UIkit 包含自己的 SVG 图标系统和库
- 插件/扩展: Yes
- 独特组件: Article, Flex, Cover, HTML Editor
- 文档: Good
- 定制: 高级 GUI 定制器，只在版本 2 中提供
- 浏览器支持: Chrome, Firefox, Safari, IE9+
- 许可证: MIT
UIkit 备注说明
UIkit 在很多的 WordPress themes 中成功使用。提供了灵活而强大的手工定制机制(老版本还提供高级的 GUI 定制器)
到底哪个框架更适合你呢?
***让我们给你一些框架选择的指南。下面是一些你在选择框架时需要着重考虑的事项：
框架是否有足够的 受欢迎程度? 受欢迎程度越高说明更多的人在使用这个项目，同时也拥有更多的教程以及文章，更多实际的例子和网站，更多第三方的扩展和更好的集成到相关的 Web 开发项目。同时也说明该框架不容易过时，一个强大社区支持的项目是不太可能被放弃的
框架是否仍然 开发活跃? 一个好的框架必须紧跟技术发展的步伐，支持***的 Web 技术，特别是对移动方面的技术支持
框架是否已经 成熟? 如果一个还没有在实际的项目中开始使用和测试，那么在你的专业项目中选择它是不明智的
框架是否提供 良好的文档? 好的文档可是为了更方便的学习
框架的 专业水准 如何?这一点主要是一个更通用的框架的专业水准应该很高，但又非常容易学习使用。在大多数情况下，***选择最少样式的，因为这样更容易进行定制。添加新的 CSS 规则比修改和重写现有的规则更加便捷和高效。此外，如果你在已有规则之上增加新的规则，就会发现这些无用的规则加大了 CSS 本身的体积。
如果你还是无法选择，你可以使用混搭的方法。如果一个框架无法完全满足你的需求，你可以从两个或者更多的框架中选择你所需要的组件。例如，你可以用一个框架中的基本 CSS 样式，然后用另外一个框架中表格系统等等。这要感谢模块化的设计 —— 模块化万岁!***还需要提到的是，由于在主流的浏览器中对 Flexbox 和表格布局都有很好的支持，所以现在构建复杂的布局已经变得非常容易。这个也不断的在鼓励更多的开发者抛弃前端框架，从头开发自己的框架。
你是怎么想的呢?我是否有漏掉这些框架的优缺点描述吗?如果你有其他的想法，请别忘了在评论中发表你的意见。
