如今的 CSS 前端框架的发展非常迅猛,但是真正好的框架不多。在这篇文章中,我将对我认为当今最好的 5 个框架进行比较。每个框架都有它自己的强项和弱项,以及适合的领域,你需要根据这些特点来进行选择。例如,如果你的项目很简单,那就没有必要选择复杂的框架。此外,还有一些选项是模块化,这样你就可以根据需要选择所需的组件,或者来自不同框架混合的组件。 我选择的这些框架是根据它们在 Github 的受欢迎程度来的,而最受欢迎的毫无疑问是 Bootstrap。 (注意:文章中的一些数据日新月异,例如 Github 上点赞数、版本号等等。当你阅读这篇文章应该意识到这些问题) Bootstrap Bootstrap 毫无争议是今天最领先的前端框架。鉴于其超级强大的人气,而且每天都还在不断增长,你可以这个框架是非常棒的,不会让你失望。
Bootstrap 注意事项 Bootstrap 最大的优势是其普及的程度。技术上来说,它不一定比这个列表上的其他框架更好,但是它比其他框架提供了更多的资源(包括文章、教程、第三方插件和扩展,主题构建等等)。简单来说,Bootstrap 使用广泛,这是人们继续选择它的主要原因。 (注意: 这里的 “独特组件” 的意思是与其他框架比较的) 2. Foundation (来自 ZURB) Foundation 在这份列表中是第二大选择。有了一个坚实的公司 ZURB 做背书,该框架有一个真正强大、而且很棒的基础。此外,有很多大网站在使用该框架,包括:Facebook, Mozilla, Ebay, Yahoo! 以及国家地理杂志等等。
Foundation 备注 Foundation 是一个真正专业的框架,提供商业支持和咨询服务。同时提供很多资源去帮你快速轻松的学习和使用该框架。 3. Semantic UI Semantic UI 一直在持续发展,构建更具语义的 Web 网站。其利用自然语言原则,使得代码更加具备可读性和易于理解。
Semantic UI 注意事项 Semantic 是最具创新以及全功能的框架。框架的整体结构和命名都有明确的逻辑和语义,在这方面碾压其他框架。 4. Pure 来自 Yahoo! Pure 是一个轻量级、模块化的框架,使用纯 CSS 编写,其包括的所有组件都可以在一起或者单独使用。
浏览器支持: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x 许可证:Yahoo! Inc. BSD Pure 备注说明 Pure 只提供了很简单的基本骨架,这对很多不需要一个全功能框架的人来说是非常棒的。 5. UIkit 来自 YOOtheme UIkit 是一个易于使用和定制的简单组件集合。虽然与其竞争对手比较,受欢迎程度没那么高,但是它同样提供了相同的功能和质量。
UIkit 备注说明 UIkit 在很多的 WordPress themes 中成功使用。提供了灵活而强大的手工定制机制(老版本还提供高级的 GUI 定制器) 到底哪个框架更适合你呢? 最后让我们给你一些框架选择的指南。下面是一些你在选择框架时需要着重考虑的事项: 框架是否有足够的 受欢迎程度? 受欢迎程度越高说明更多的人在使用这个项目,同时也拥有更多的教程以及文章,更多实际的例子和网站,更多第三方的扩展和更好的集成到相关的 Web 开发项目。同时也说明该框架不容易过时,一个强大社区支持的项目是不太可能被放弃的 框架是否仍然 开发活跃? 一个好的框架必须紧跟技术发展的步伐,支持最新的 Web 技术,特别是对移动方面的技术支持 框架是否已经 成熟? 如果一个还没有在实际的项目中开始使用和测试,那么在你的专业项目中选择它是不明智的 框架是否提供 良好的文档? 好的文档可是为了更方便的学习 框架的 专业水准 如何?这一点主要是一个更通用的框架的专业水准应该很高,但又非常容易学习使用。在大多数情况下,最好选择最少样式的,因为这样更容易进行定制。添加新的 CSS 规则比修改和重写现有的规则更加便捷和高效。此外,如果你在已有规则之上增加新的规则,就会发现这些无用的规则加大了 CSS 本身的体积。 如果你还是无法选择,你可以使用混搭的方法。如果一个框架无法完全满足你的需求,你可以从两个或者更多的框架中选择你所需要的组件。例如,你可以用一个框架中的基本 CSS 样式,然后用另外一个框架中表格系统等等。这要感谢模块化的设计 —— 模块化万岁!最后还需要提到的是,由于在主流的浏览器中对 Flexbox 和表格布局都有很好的支持,所以现在构建复杂的布局已经变得非常容易。这个也不断的在鼓励更多的开发者抛弃前端框架,从头开发自己的框架。 |