2017 年最受欢迎的 5 个前端框架比较

现如今的 CSS 后端架构的产业发展十分十分迅速，但或是说好的架构太少。在这首诗中，我将对我指出现今最合适的 5 个架构展开较为。每一架构都有它他们的弱项和弱项，和适宜的应用领域，你须要依照那些特征来展开优先选择选择。例如，假如你的工程项目很单纯，那就没必要性优先选择选择繁杂的架构。除此之外，除了许多快捷键是模组化，这种你就能依照须要优先选择选择所需的模块，或是源自相同架构混和的模块。

我优先选择选择的那些架构是依照它在 Github 的畅销某种程度来的，而最畅销的众所周知是 Bootstrap。

(特别注意：该文中的许多统计数据飞速产业发展，比如 Github 绒兰entries、正式版之类。当你写作这首诗假如意识到那些难题)

Bootstrap

Bootstrap 不无争论是那时最领跑的后端架构。有鉴于其DT强悍的曝光率，所以每晚都还在急速快速增长，你能那个架构是十分棒的，不能让你沮丧。

译者:Mark Otto and Jacob Thornton.

正式发布天数: 2011

现阶段版: 3.3.7

普及化流程: 在 Github 上赢得 111,000 积和式赞

叙述: “Bootstrap 是最畅销的 HTML、CSS 和 JavaScript 架构，用作合作开发积极响应式、终端优先的 Web 应用应用领域”

核心理念基本概念:RWD 和终端优先选择

架构表面积: 154 KB

预CPU: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

预CPU: 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

预CPU: 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

预CPU: 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 图标时)

预CPU: 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 本身的表面积。

你是怎么想的呢？我是否有漏掉那些架构的优缺点叙述吗？假如你有其他的想法，请别忘了在评论中发表你的意见。

▼