11种最佳CSS框架

【51CTO.com快译】

对于任何前端开发人员而言，他们通常只关心两类问题：第一个是时间与效率，另一个是浏览器的兼容性测试问题。为了解决这两类问题，我们需要采用一种合适的网页设计方法，以实现在节省时间和提高效率的基础上，改善用户的使用体验。而CSS正是此类方法中的一种。

作为Web设计工具，CSS(Cascading Style Sheets，层叠样式表)可以将文档的内容与文档的表示相分离，从而大幅减少文件的传输体积。与此同时，您对网站CSS样式表的任何更改，都会自动反映在所有页面上。因此，CSS不但提供了出色的设计一致性，而且提供了多种格式的选项。

既然CSS对于开发人员和用户都十分有益，那么我们该如何选择CSS框架呢?下面，我将详细地给您介绍目前最佳的11种CSS框架。

1、 Bootstrap

作为最受欢迎的 工具 之一，Bootstrap在Web开发人员眼中已成为了业界领先的前端框架。为了使Web开发人员能够构建出不同的用户界面组件，Bootstrap能够将CSS、Javascript和HTML代码组合到一起。

Bootstrap 4是该框架的最新版本，它带有更新的组件，更好的样式表，并且能够让网页和CSS中的图像具有更快的响应能力。此外，Bootstrap 4也支持LESS(Leaner Style Sheets)和SASS(Syntactically Awesome Stylesheets)。

通常，Bootstrap能够以可重用组件的形式，提供包括：导航栏、下拉菜单、分页、以及标签等常见的HTML元素。您可以轻松地将它们合并到既有的网页设计中，而不必从头开始。

Bootstrap CSS框架的使用情况统计

• 在State of CSS的调查中，它位居2020年最佳CSS框架类别排名榜首。
• 有45%的CSS开发人员已经在使用，并希望继续使用它。
• 在Github上拥有14万颗星、68.7万个fork、以及1115个贡献者。

选择Bootstrap CSS框架的理由

1.省时

您无需成为专业的程序员，便可使用Bootstrap来开发网站。通过其前端框架的全面文档，以及内置的即用型组件，您可以更快地开发目标网站，以腾出时间来分析其他方面的复杂性。

2.防止出现浏览器的兼容性问题

跨浏览器测试对于在不同设备上运行和验证目标网站的性能，是至关重要的。Bootstrap 4.0能够与所有最新的浏览器相兼容，并确保网站元素没有任何兼容性方面的问题。

3.维护良好的代码库

随着Bootstrap越来越受欢迎，其维护团队也在不断地对其进行更新。同时，他们也会持续对各种技术和浏览器进行测试。

4.更好的一致性和团队合作精神

由于Bootstrap的最终结果需要在所有的浏览器和平台上看起来相一致，因此一旦在设计团队或开发团队中有新的成员加入时，其相关的文档能够方便新成员轻松地了解前端框架的所有知识，进而促进公司内部更好的团队合作。

5.学习曲线平缓

就学习曲线而言，初学者可以凭借着大量的可用文档，很容易地上手Bootstrap。在学习的过程中，他们也能够很快地发现困难的所在。

Bootstrap CSS框架的有待改进之处

1.较慢的加载时间

Bootstrap会生成大量的文件，这可能会影响到网站的加载速度和时间。为此，您必须手动删除一些内容。

2.“千站一面”

除非您自定义了各种样式，否则为了简化起见，Bootstrap会导致各个网站都看上去极其相似。

知名客户

Twitter、Spotify、Intel、Walmart、Udemy、Mint。

2、 Foundation

ZURB于2011年9月设计出了Foundation。与其他CSS框架相比，Foundation不但拥有先进而复杂的界面，而且提供了响应式菜单，以及与各种设备和浏览器的兼容性。您还可以使用CSS框架，来轻松地按需设置各种菜单样式。

得益于超响应式(super-responsive)CSS框架，设计人员可以遵循“自行设计网站(design-the-site-yourself)”的方法，以拥有对项目的更大控制权。

Foundation CSS框架的使用情况统计

• 在State of CSS的调查中，它位居2020年最佳CSS框架类别排名第二。
• 有14.1%的CSS开发人员已经在使用，并希望继续使用它。
• 在Github上拥有2.8万颗星、5.8千个fork、以及984个贡献者。

选择Foundation CSS框架的理由

1.更独特

Foundation使您可以自定义与其他网站不同外观的站点。

2.减少CSS膨胀(Bloat)

由于它内置了基本的CSS外观，因此大幅减少了HTML中的CSS膨胀。

3.更好的网格灵活性

您可以借助“折叠(collapse)”类，轻松地删除gutters和折叠列。您还可以在block-sized网格的帮助下，灵活地创建相等大小的列。

4.小部件

Foundation可以轻松地将网站导航放置在侧边，以将其隐藏。同时，您还能获得一个HTML5的表单验证库，一个基于订阅产品价格的显示表，以及根据不同设备自定义出用户体验的选项。

Foundation CSS框架的有待改进之处

1.耗时

初学者很难上手Foundation CSS框架，其学习过程也会比较耗时。

2.妥协的支持

虽然拥有社区支持、质量检查、以及相关论坛，但是它提供给开发人员前端框架并不丰富。

3.可定制的复杂性

与许多其他CSS框架相比，开发人员可以自定义复杂的网站。

知名客户

EA、Amazon、eBay、Adobe、Mozilla。

3. Materialize CSS

以Google为基础的Materialize CSS融合了JavaScript、CSS和HTML等各种组件。它不但具有一定的响应能力，而且存在较少的浏览器兼容性问题。如果您希望构建一个优雅的UI，那么Materialize就可以通过大量的自定义CSS，以及多种配色方案，来帮助您完成独特的网站设计。

Materialize CSS框架的使用情况统计

• 在State of CSS的调查中，它位居2020年最佳CSS框架类别排名第三。
• 有17.1%的CSS开发人员已经在使用，并希望继续使用它。
• 在Github上拥有3.7万颗星、4.8千个fork、以及250个贡献者。

选择Materialize CSS框架的理由

1.多种内置功能

Materialize的内置功能包括：视差元素、各种卡片、流文本、可悬停的项目及对象等。

2.减少编码的时间

由于其大多数功能都易于使用，因此Materialize大幅减少了开发人员的编码时间。

3.超棒的插件选择

可折叠的对话框、下拉菜单、多媒体、模态(Modals)、以及视差(Parallax)等都是Materialize提供的免费JavaScript插件。开发人员可以轻松地使用它们来改善目标网站的用户界面。

4.易用性

Materialize不但带有清晰的文档，其特定的代码实例也可以进一步帮助您了解前端的框架。

Materialize CSS框架的有待改进之处

1.复杂的JavaScript组件

Materialize CSS框架的JavaScript组件对于新手而言，有一定的难度。

2.支持不够

对于Materialise的支持社区并不太成熟。

知名客户

WPArena、Digital Services、GameRaven、DroneDeploy。

4. Semantic UI

作为一名全栈开发人员，Jack Lukic使用自然语言原理创建了Semantic UI框架。凭借着jQuery和LESS功能，Semantic UI提供了光滑、平整且精细的外观，以及轻量级的用户体验。它的社区虽然相对较小，但是其成员既热情又忠诚。他们的目标是创建一种共享的UI语言，以赋予开发人员和设计人员同样的权利。目前，Semantic UI社区已经拥有约3000多个主题。

Semantic UI CSS框架的使用情况统计

• 在State of CSS的调查中，它位居2020年最佳CSS框架类别排名第四。
• 有9.2%的CSS开发人员已经在使用，并希望继续使用它。
• 在Github上拥有4.7万颗星、5千个fork、以及190个贡献者。

选择Semantic UI CSS框架的理由

1.简单易用

Semantic UI的最大好处是非常易用。您只需键入需要的内容，就能够轻松地将其合并到目标网站的设计中。

2.大量可用的主题

布局的多样性是Semantic UI的另一个优势。通过不同的主题，您可以轻松地为各种项目找到必要的组件。

3.页面设计用时少

由于Semantic UI类在命名上清晰易懂，因此开发人员不但节省了学习的时间，也让手头上项目的开发更快、更直观。

Semantic UI CSS框架的有待改进之处

1.浏览器兼容性测试问题

由于Semantic UI不支持IE 7，因此其浏览器的兼容性并不理想，而且在兼容性测试中可能会造成一定的缺陷。

2.更新缓慢

相比其他前端框架的频繁更新，Semantic UI在2018-2019年度已经一年没有更新了。

3.反应迟钝

在某些设备上运行其开发的网站时，响应能力可能并不佳。

知名客户

Snapchat、Accenture、Kmong、Samsviran、Ristoranti。

5、 Bulma

作为一个基于Flexbox的开源框架，Bulma在全世界拥有超过20万名开发用户。它可以通过可视化的组件，让开发人员了解其运作的过程。该前端框架通过各种技术，为前端开发人员提供了一种内聚(cohesive)的界面。此外，由于它使用了响应式模板，因此我们可以更好地专注于网站的内容，而不是代码的编写。

Bulma CSS框架的使用情况统计

• 在State of CSS的调查中，它位居2020年最佳CSS框架类别排名第五。
• 有10%的CSS开发人员已经在使用，并希望继续使用它。
• 在Github上拥有3.9万颗星、3.3千个fork、以及303个贡献者。

选择Bulma CSS框架的理由

1.创新且简易的设计

Bulma方便了开发人员更加轻松地创建和自定义各类应用。其集成式的Flexbox响应能力使得前端开发人员能够构建出独特的设计。

2.详尽的文档

Bulma带有详尽的文档，可帮助开发人员轻松地开展他们的项目，并获得对应的支持。

3.多功能性

Bulma能够提供排版、表格、按钮、表格等组件。这些有助于保障框架的坚实基础和高度通用性。此外，它还包含了诸如垂直对齐、布局和不同媒体对象的组件方案。

Bulma CSS框架的有待改进之处

1.在IE上比较慢

即使在浏览器兼容性测试中未出现任何问题，该CSS框架在IE上的运行速度也比较慢。

2.小众社区

由于相对较新，因此Bulma的社区并不像Bootstrap等框架那么活跃。

知名客户

Django、Rubrik、XICA magellan、Tam Development、Awesome Stacks、WordPress。

6、 UIKit

UIKit是一个模块化的轻量级前端CSS框架。它非常适合于快速开发那些功能强大的Web界面。凭借着CSS、HTML和JS组件的全面集合，它能够让前端框架既容易扩展，又方便被定制使用。UIKit是用于开发iOS应用最广泛的前端框架之一。它定义了诸如：按钮、标签、导航控制器和表格视图等核心组件。

UIKit CSS框架的使用情况统计

• 在State of CSS的调查中，它位居2020年最佳CSS框架类别排名第六。
• 有3.27%的CSS开发人员已经在使用，并希望继续使用它。
• 在Github上拥有1.5万颗星、2.2千个fork、以及28个贡献者。

选择UIKit CSS框架的理由

1.清晰的架构

UIKit具有明确定义的规则和简洁的代码。

2.现成可用的主题

您可以从网站的下拉菜单中选择所需的主题，并下载其对应的LESS CSS或SASS文件。

3.模块化

UIKit的全面设计可以使设计人员轻松地选择不同的组件，以将其添加到样式表中。由于前端框架的模块化程度较高，因此它的加入并不会破坏网站的整体风格。

4.高度可定制性

凭借着UIKit的高度可定制性，设计人员可以轻松地创建出全新的外观。其内置的动画功能也增加了网站的趣味性。

UIKit框架的有待改进之处

1.缺乏可学习的资源

由于该前端框架缺乏一定的普及性，因此用户很难找到额外的学习资源。所有开发人员都必须依赖其官方的文档。

2.封闭而缓慢的开发

UIKit的开发周期较长，而且其修复错误的过程也比较耗时。此外，由于其开发是在内部进行的，因此用户无法公开地获取相关信息。

3.复杂的代码类

其嵌套的类不但难以阅读，并且可能无法获得预期的结果。

知名客户

LiteTube、AskNicely、Crunchyroll、SolarWinds、Nedwave。

7. PureCSS

由Yahoo开发的PureCSS，提供了一组体积小、且具有快速响应能力的CSS模块。它非常适合开发那些界面美观且功能不同的项目。PureCSS具有快速响应能力的内置设计，以及最小体积的标准化CSS，而且它们都是免费的!

PureCSS框架的使用情况统计

• 在State of CSS的调查中，它位居2020年最佳CSS框架类别排名第七。
• 有5.44%的CSS开发人员已经在使用，并希望继续使用它。
• 在Github上拥有2万颗星、2.1千个fork、以及59个贡献者。

选择PureCSS框架的理由

1.可简单定制

该前端框架让设计人员可以自定义，并能够构建出他们喜欢的设计风格。

2.浏览器兼容性测试

得益于Normalize.css，PureCSS在多个浏览器兼容性测试中，基本不会出现任何问题。

3.可扩展性

由于设计人员可以轻松地添加新的CSS规则，而不会覆盖现有的CSS规则，因此他们可以根据实际项目来自定义外观。

4.轻巧与响应能力

它的gzip文件只有4.5KB，显然非常轻巧。由于PureCSS带有12列的移动优先的流体格(mobile-first fluid grid)，可以支持不同尺寸屏幕的响应，因此由它创建的网站，可以根据用户的设备，灵活地显示页面。

PureCSS框架的有待改进之处

1.不太适合初学者

PureCSS并不能提供多种独特的样式，也未能提供自定义的服务，因此它不太适合初学者。

知名客户

SkyQuest Tech Stack、Hacktoolkit、PodcastParty、Wizters、Choobs Ltd。

8、 Tailwind

Tailwind是一款utility-first的框架，可以被用于快速地构建UI。作为一个utility-based的CSS库，它比那些语义和精益标记(lean markup)更注重实用性和速度。在创建网站时，您只需要确定项目的范围，而无需自行编写CSS。虽然Tailwind并不提供默认的主题，您也找不到任何内置的UI组件，但是您可以使用预设计的部件菜单，来构建目标网站。

Tailwind CSS框架的使用情况统计

• 在State of CSS的调查中，它位居2020年最佳CSS框架类别排名第八。
• 有4.9%的CSS开发人员已经在使用，并希望继续使用它。
• 在Github上拥有69颗星、13个fork、以及2个贡献者。

选择Tailwind CSS框架的理由

1.网站不会受到个别更改的影响

某个元素的更改并不会影响到与之相关的其他元素。

2.易于使用

一旦熟悉了语法，您可以轻松地使用Tailwind，而且不必在样式表和HTML之间来回切换。

3.高度可定制性

它带有许多自定义的选项，而且不会预设网站的外观。

4.更快速的开发

由于Tailwind省略了编写CSS的必须步骤，因此其开发速度得以大幅提升。

Tailwind CSS框架的有待改进之处

1.对CSS专家的吸引力不够

该前端框架对于刚入行的开发人员来说，比较容易上手，但是对于资深的CSS开发人员，则不太有吸引力。

2.不支持网格布局(Grid Layout)

即使在12列布局下，Tailwind也不支持网格布局。

知名客户

BlaBlaCar、otto-now、Website、Clarisights、JetThoughts、EXR。

9. Ant Design

由阿里巴巴开发的Ant Design是一种Javascript库类型的ReactJS组件库。通过将屏幕区域分为24列网格，它增加了用户对于可见区域的自定义能力。同时，它通过各种填充(filled)和轮廓(outlined)图标，来满足不同的应用程序的要求。

Ant Design CSS框架的使用情况统计

• 在State of CSS的调查中，它位居2020年最佳CSS框架类别排名第九。
• 有4.39%的CSS开发人员已经在使用，并希望继续使用它。
• 在Github上拥有6.9万颗星、2.1千个fork、以及1085个贡献者。

选择Ant Design CSS框架的理由

1.支持表单组件

开发人员可以为FormItem添加TextArea、Input、Radio、Checkbox、Date或TimePicker。

2.出色的反馈组件

它可以为用户的各项操作提供即时的通知。

3.企业级的网站外观

Ant Design能够为开发人员提供企业级的网站外观。

4.辅助功能

它符合ARIA规范，并提供键盘处理和制表等功能。

5.节省时间

其原型制作方式可以节省大量的开发时间。

Ant Design CSS框架的有待改进之处

1.缺乏英文版文档

原始文档仅提供中文版，当然其社区提供了良好的翻译服务。

知名客户

蚂蚁金服、阿里、腾讯、百度、口碑、美团。

10、 Tachyons

与其他流行的前端框架不同，Tachyons旨在将CSS规则分解为小型的、可管理的、以及可复用的部件。Tachyons可以帮助开发人员创建出具有高度可读性、能够快速加载和响应的网站，而且无需使用大量CSS代码。

Tachyons CSS框架的使用情况统计

• 在State of CSS的调查中，它位居2020年最佳CSS框架类别排名第十。
• 有4.13%的CSS开发人员已经在使用，并希望继续使用它。
• 在Github上拥有9.7万颗星、611个fork、以及64个贡献者。

选择Tachyons CSS框架的理由

1.容易上手

由于没有陡峭的学习曲线，因此初学者可以轻松地学习和使用它。

2.完全可定制

Tachyons包含了大量可定制的CSS模块。由于其模块内没有复杂的依赖关系，因此开发人员易于进行定制。

3.不强制遵守默认样式

由于不同的类在不同的屏幕尺寸上具有相应的变体，因此开发人员可以控制页面的布局，而不必拘泥于默认的样式。

4.快速原型

由于只需药很少的设计便可展示出网站的效果，因此Tachyons非常适合于原型的制作。

5.良好的文档

Tachyons的文档不但结构合理，而且易于被开发人员所理解。

Tachyons CSS框架的有待改进之处

1.缺乏创新力

其默认设置不足以让用户创建出具有独特外观的网站。

2.拖慢开发的进程

Tachyons复杂的类名称和结构，可能会拖慢开发的进程。

知名客户

Everlane、CrewFire、Agema、guac.live。

11、 Primer

得益于全球最大的开发商社区—Github，Primer采用系统级方法，来确保诸如：版式、间距和颜色等样式的一致性。因此，Primer不但框架简单，而且能够给用户来带一致性的体验。

Primer CSS框架的使用情况统计

• 在State of CSS的调查中，它位居2020年最佳CSS框架类别排名第十一。
• 有0.62%的CSS开发人员已经在使用，并希望继续使用它。
• 在Github上拥有9.2万颗星、1.5万个fork、以及77个贡献者。

选择Primer CSS框架的理由

1.可自定义的样式

Primer提供了各种大小与粗细的字体样式。据此，开发人员可以通过创建样式，来增强网站的可读性和吸引力。

2.绝佳的配色方案

通过提供了绝佳的配色方案，Primer能够增加内容的表现力。其颜色工具和变量也能够为开发人员提供各种主题的样式选项，而不必与某个特定的结构捆绑在一起。

3.可组合的间距比例

它提供的可组合式base-8间距，能够与Github的内容紧密配合。其填充间隔和边距可以确保水平和垂直方向的一致性。

Prime CSS框架的有待改进之处

1.缺乏人气和评论

Primer不如同类其他产品那样受欢迎。由于很少有用户使用过该CSS框架，因此也就没有足够的评论，来帮助新用户下定尝试的决心。

2.社区支持不够

由于Primer的用户群很小，因此其社区支持力度不足。

知名客户

My Stack、timelog、g59 Ranking、Complete Toolset。

总结

我在上面提到的11种CSS框架各有优缺点。您可以根据实际项目的需求，进行选择。当然请先通过测试，确保您采用的框架不会出现任何CSS或HTML的浏览器兼容性问题。

原标题：11 Best CSS Frameworks To Look Forward In 2020 ，作者: Veethee Dixit

【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】

【责任编辑：庞桂玉 TEL：（010）68476606】