【.com快译】对于任何一个前端开发者来说，他们通常只关心两类问题：第一是时间和效率，第二是浏览器兼容性测试问题。为了解决这两类问题，我们需要采用合适的网页设计方法，在节省时间、提高效率的基础上，提升用户体验。CSS就是这样一种方法。CSS（CascadingStyleSheets，层叠样式表）作为一种网页设计工具，可以将文档的内容与文档的表现形式分开，从而大大减少文件传输量。同时，您对网站CSS样式表所做的任何更改都会自动反映在所有页面上。因此，CSS不仅提供了出色的设计一致性，还提供了多种格式选项。既然CSS对开发者和用户都非常有利，那我们该如何选择CSS框架呢？下面，小编就为大家详细介绍一下目前最好的11个CSS框架。1.Bootstrap作为最流行的工具之一，Bootstrap已经成为Web开发者眼中业界领先的前端框架。为了使Web开发人员能够构建不同的用户界面组件，Bootstrap可以将CSS、Javascript和HTML代码组合在一起。Bootstrap4是该框架的最新版本，它带有更新的组件、更好的样式表以及使网页和CSS中的图像更具响应性的能力。此外，Bootstrap4还支持LESS（LeanerStyleSheets）和SASS（SyntacticallyAwesomeStylesheets）。通常，Bootstrap可以以可重用组件的形式提供常见的HTML元素，包括：导航栏、下拉菜单、分页和标签。您可以轻松地将它们合并到您现有的网页设计中，而无需从头开始。BootstrapCSS框架的使用统计在CSS状态调查中，它位居2020年最佳CSS框架类别之首。45%的CSS开发人员已经在使用它并希望继续使用它。在Github上拥有140,000个stars、687,000个fork和1,115个贡献者。选择BootstrapCSS框架的理由1.节省时间你不需要成为专业的程序员就可以使用Bootstrap开发网站。凭借其前端框架的全面文档和内置的即用型组件，您可以更快地开发目标网站，从而腾出时间来分析其他方面的复杂性。2.防止浏览器兼容性问题跨浏览器测试对于在不同设备上运行和验证目标网站的性能至关重要。Bootstrap4.0兼容所有最新的浏览器，确保网站元素不存在任何兼容性问题。3.维护良好的代码库随着Bootstrap越来越流行，其维护团队也在不断更新。同时，他们将继续测试各种技术和浏览器。4.更好的一致性和团队合作由于Bootstrap的最终结果需要在所有浏览器和平台上看起来一致，一旦设计团队或开发团队的新成员加入，其相关文档方便新成员轻松理解所有知识前端框架，从而促进公司内部更好的团队合作。5.学习曲线平缓。就学习曲线而言，初学者可以借助大量可用文档轻松上手Bootstrap。在学习的过程中，他们也能很快找出难点所在。BootstrapCSS框架需要改进的地方1.加载时间慢Bootstrap生成大量文件，这可能会影响网站的加载速度和时间。为此，您必须手动删除一些内容。2、“千站同”除非你自定义了各种样式，否则为了简单起见，Bootstrap会让所有的网站看起来都非常相似。知名客户Twitter、Spotify、Intel、Walmart、Udemy、Mint。2.FoundationZURB于2011年9月设计了Foundation。与其他CSS框架相比，Foundation不仅拥有先进复杂的界面，还提供了响应式菜单以及对各种设备和浏览器的兼容性。您还可以使用CSS框架根据需要轻松设置各种菜单的样式。得益于超级响应的CSS框架，设计人员可以遵循“自己设计网站”的方法来更好地控制项目。FoundationCSSFramework的使用统计在StateofCSS调查中，它在2020年最佳CSS框架类别中排名第二。14.1%的CSS开发人员已经在使用它并希望继续使用它。在Github上拥有28,000颗星、5,800个分叉和984个贡献者。选择FoundationCSSFramework的理由1.更独特Foundation允许您自定义您的网站，使其具有不同于其他网站的外观。2.减少CSS膨胀（Bloat）由于内置了基本的CSS外观，大大减少了HTML中的CSS膨胀。3.更好的网格灵活性您可以在“collapse”类的帮助下轻松移除排水沟和折叠列。您还可以在块大小的网格的帮助下灵活地创建大小相等的列。4.WidgetsFoundation可以轻松地将网站导航放置在侧面以隐藏它。同时，您还可以获得一个HTML5表单验证库、一个基于订阅产品价格的显示表格，以及根据不同设备定制用户体验的选项。FoundationCSS框架需要改进的地方1.耗时FoundationCSS框架对于初学者来说上手比较困难，学习过程会比较费时。2.妥协的支持虽然有社区支持、质检、相关论坛，但没有为开发者提供丰富的前端框架。3.可定制的复杂性与许多其他CSS框架相比，开发人员可以定制复杂的网站。知名客户EA、Amazon、eBay、Adobe、Mozilla。3.MaterialiseCSS基于Google，MaterialiseCSS集成了JavaScript、CSS和HTML等多种组件。它不仅反应灵敏，而且浏览器兼容性问题也更少。如果你想构建优雅的UI，Materialise可以通过大量自定义CSS，以及多种配色方案，帮助你完成独一无二的网站设计。MaterialiseCSSFramework的使用统计在StateofCSS调查中，它在2020年最佳CSS框架类别中排名第三。17.1%的CSS开发人员已经在使用它并希望继续使用它。在Github上拥有37,000颗星、4,800个分叉和250个贡献者。选择MaterialiseCSS框架的理由1.多种内置功能Materialize的内置功能包括：视差元素、各种卡片、流文本、悬停项和对象等。2.减少编码时间，因为它的大部分功能都易于使用,Materialise大大减少了开发人员的编码时间。3.出色的插件选择可折叠对话框、下拉菜单、多媒体、模态（Modals）和视差（Parallax）都是Materialise提供的免费JavaScript插件。开发人员可以轻松地使用它们来改进目标网站的用户界面。4.易用性Materialise不仅文档清晰，其具体的代码示例可以进一步帮助您了解前端框架。MaterialiseCSS框架需要改进的地方1.复杂的JavaScript组件MaterialiseCSS框架的JavaScript组件对于新手来说有些难度。2.支持不足Materialise的支持社区不是很成熟。知名客户WPArena、DigitalServices、GameRaven、DroneDeploy。4.SemanticUI作为一名全栈开发人员，JackLukic利用自然语言原理创建了SemanticUI框架。借助jQuery和LESS功能，SemanticUI提供流畅、平坦和详细的外观以及轻量级的用户体验。它的社区相对较小，但其成员热情且忠诚。他们的目标是创建一种共享的UI语言，为开发人员和设计人员提供支持。目前，SemanticUI社区已经拥有超过3000个主题。SemanticUICSSFramework的使用统计在StateofCSS调查中，它在2020年最佳CSS框架类别中排名第4。9.2%的CSS开发人员已经在使用它并希望继续使用它。在Github上拥有47,000颗星、5,000个分叉和190个贡献者。选择SemanticUICSS框架的理由1.易于使用SemanticUI最大的优点就是非常容易使用。您只需输入您需要的内容，它就可以很容易地融入您的目标网站的设计中。2.可用主题布局的多样性是SemanticUI的另一个优势。通过不同的主题，您可以轻松找到各种项目所需的组件。3.更少的页面设计时间由于SemanticUI类的名称清晰易懂，开发者不仅可以节省学习时间，还可以使手头项目的开发更快更直观。SemanticUICSS框架需要改进的地方1.浏览器兼容性测试问题由于SemanticUI不支持IE7，其浏览器兼容性不理想，在兼容性测试中可能会造成一定的缺陷。2.更新缓慢相比于其他前端框架的频繁更新，SemanticUI在2018-2019年已经一年没有更新了。3.反应迟钝在某些设备上运行其开发的网站时，响应性可能不佳。知名客户Snapchat、Accenture、Kmong、Samsviran、Ristoranti。5.Bulma是一个基于Flexbox的开源框架。Bulma在全球拥有超过200,000名开发用户。它可以让开发者通过可视化的组件了解其运行的过程。前端框架通过各种技术为前端开发人员提供了一个内聚的接口。此外，由于它使用响应式模板，我们可以更好地专注于网站的内容，而不是编写代码。BulmaCSS框架的使用统计在CSS状态调查中，它在2020年最佳CSS框架类别中排名第5。10%的CSS开发人员已经在使用它并希望继续使用它。在Github上拥有39,000个stars、33,000个fork和303个贡献者。选择BulmaCSS框架的理由1.创新简洁的设计Bulma让开发者更容易创建和定制各种应用。其集成的Flexbox响应能力使前端开发人员能够构建独特的设计。2.详尽的文档Bulma自带详尽的文档帮助开发者轻松开展项目并获得相应的支持。3.VersatilityBulma可以提供排版、表格、按钮、表格等组件。这些有助于确保框架的坚实基础和高度通用性。此外，它还包括组件方案，例如垂直对齐、布局和不同的媒体对象。BulmaCSS框架需要改进的地方1.IE慢即使浏览器兼容性测试没有问题，CSS框架在IE上运行也很慢。2.小众社区由于比较新，Bulma的社区不如Bootstrap等框架活跃。知名客户Django、Rubrik、XICAmagellan、TamDevelopment、AwesomeStacks、WordPress。6.UIKitUIKit是一个模块化的轻量级前端CSS框架。非常适合快速开发那些功能强大的web界面。全面的CSS、HTML和JS组件集合，使得前端框架既易于扩展又易于定制。UIKit是用于开发iOS应用程序的最广泛使用的前端框架之一。它定义了核心组件，例如：按钮、标签、导航控制器和表格视图。UIKitCSSFramework的使用统计在StateofCSS调查中，它在2020年最佳CSS框架类别中排名第6。3.27%的CSS开发人员已经在使用它并希望继续使用它。在Github上拥有15,000颗星、22,000个分叉和28个贡献者。选择UIKitCSS框架的理由1.清晰的架构UIKit具有定义明确的规则和干净的代码。2.即用型主题您可以从网站的下拉菜单中选择所需的主题，并下载其对应的LESSCSS或SASS文件。3.模块化UIKit的全面设计可以让设计者很容易地选择不同的组件添加到样式表中。由于前端框架的高度模块化，其加入不会破坏网站的整体风格。4.高度可定制性借助UIKit的高度可定制性，设计师可以轻松打造出全新的外观。其内置的动画功能也增加了网站的趣味性。UIKit框架需要改进的地方1.缺乏学习资源由于前端框架缺乏普及，用户很难找到额外的学习资源。所有开发人员都必须依赖其官方文档。2、封闭和缓慢的开发UIKit开发周期长，修复错误的过程也很耗时。此外，由于其开发是在内部进行的，因此用户无法公开获取有关它的信息。3.复杂的代码类及其嵌套类不仅难以阅读，而且可能无法获得预期的结果。知名客户LiteTube、AskNicely、Crunchyroll、SolarWinds、Nedwave。7.PureCSS由雅虎开发，PureCSS提供了一组小而快速响应的CSS模块。非常适合开发那些界面美观，功能多样的项目。PureCSS具有响应式内置设计和最小量的标准化CSS，而且全部免费！PureCSS框架的使用情况统计在StateofCSS调查中，它在2020年最佳CSS框架类别中排名第7位。5.44%的CSS开发人员已经在使用它并希望继续使用它。在Github上拥有20,000颗星、2.1,000个分叉和59个贡献者。选择PureCSS框架的理由1.易于定制。这个前端框架允许设计师定制和构建他们喜欢的设计风格。2.浏览器兼容性测试得益于Normalize.css，PureCSS在多个浏览器兼容性测试中基本不会出问题。3.可扩展性由于设计者可以很容易地添加新的CSS规则而不用覆盖现有的CSS规则，因此他们可以根据实际项目定制外观。4.轻巧灵敏。它的gzip文件只有4.5KB，显然是非常轻量级的。由于PureCSS带有12列移动优先的流体网格，可以支持不同尺寸屏幕的响应，因此它创建的网站可以根据用户的设备灵活地显示页面。PureCSS框架需要改进的地方1.不适合初学者PureCSS不提供各种独特的样式，也不能提供定制服务，所以不适合初学者。知名客户SkyQuestTechStack、Hacktoolkit、PodcastParty、Wizters、ChoobsLtd.8.TailwindTailwind是一个实用程序优先的框架，可用于快速构建UI。作为一个基于实用的CSS库，它更注重实用性和速度，而不是语义和精益标记。创建网站时，只需要确定项目范围，不需要自己写CSS。虽然Tailwind没有默认主题，您也找不到任何内置UI组件，但您可以使用预先设计的小部件菜单来构建您的目标网站。TailwindCSSFramework的使用统计在CSS状态调查中，它在2020年最佳CSS框架类别中排名第8位。4.9%的CSS开发人员已经在使用它并希望继续使用它。在Github上拥有69颗星、13个分叉和2个贡献者。选择TailwindCSS框架的理由1.网站不会因个别改动而受到影响。对一个元素的更改不会影响与其相关的其他元素。2.易用性一旦熟悉了语法，就可以轻松使用Tailwind，而无需在样式表和HTML之间来回切换。3.高度可定制自带多种定制选项，不预设网站外观。4.开发速度更快因为Tailwind省略了编写CSS的必要步骤，所以它的开发速度可以大大提高。TailwindCSS框架中需要改进的地方1.对CSS专家的吸引力不够。这个前端框架对于刚入行的开发者来说比较容易，但是对于有经验的CSS开发者来说吸引力不是很大。2.不支持网格布局（GridLayout）即使是12列布局，Tailwind也不支持网格布局。知名客户BlaBlaCar、otto-now、Website、Clarisights、JetThoughts、EXR。9、AntDesignAntDesign是阿里巴巴开发的一个Javascript库类型的ReactJS组件库。它通过将屏幕区域划分为24列的网格来增加用户自定义可见区域的能力。同时，它通过各种填充（filled）和轮廓（outlined）图标来满足不同应用的需求。AntDesignCSSFramework的使用统计在StateofCSS调查中，它在2020年最佳CSS框架类别中排名第九。4.39%的CSS开发人员已经在使用它并希望继续使用它。在Github上拥有69,000颗星、2.1,000个分支和1,085位贡献者。选择AntDesignCSS框架的理由1.支持表单组件开发者可以在FormItem中添加TextArea、Input、Radio、Checkbox、Date或TimePicker。2.优秀的反馈组件可以为用户的各种操作提供即时通知。3.企业级的网站外观AntDesign可以为开发者提供企业级的网站外观。4.Accessibility符合ARIA规范，提供键盘处理、制表等功能。5.节省时间它的原型制作方法可以节省大量的开发时间。AntDesignCSS框架需要改进的地方1.缺少英文文档。原始文档仅提供中文版本。当然，它的社区提供了很好的翻译服务。知名客户蚂蚁金服、阿里、腾讯、百度、口碑、美团。10.与其他流行的前端框架不同，Tachyons旨在将CSS规则分解为小的、可管理的和可重用的组件。Tachyons可以帮助开发人员在不使用大量CSS代码的情况下创建可读性强、加载速度快和响应迅速的网站。TachyonsCSS框架使用统计在CSS状态调查中，它在2020年最佳CSS框架类别中排名第10。4.13%的CSS开发人员已经在使用它并希望继续使用它。在Github上拥有97,000颗星、611个分叉和64个贡献者。选择TachyonsCSSFramework的理由1.易于使用由于没有陡峭的学习曲线，初学者可以轻松学习和使用它。2.完全可定制的Tachyons包含大量可定制的CSS模块。由于其模块内没有复杂的依赖关系，开发人员可以轻松定制。3.不强制遵守默认样式由于不同的类在不同的屏幕尺寸上有相应的变体，开发者可以控制页面的布局而不必拘泥于默认样式。4.快速原型制作Tachyons非常适合原型制作，因为它只需要少量的设计就可以展现网站的效果。5.良好的文档Tachyons的文档不仅结构合理，而且易于开发人员理解。TachyonsCSS框架需要改进的地方1.缺乏创新。它的默认设置不足以让用户创建具有独特外观的网站。2.减慢开发过程Tachyons复杂的类名和结构可能会减慢开发过程。知名客户Everlane、CrewFire、Agema、guac.live。11.Primer受益于全球最大的开发者社区Github，采用系统级的方式保证排版、间距、颜色等风格的一致性。因此，Primer不仅框架简单，而且能给用户带来一致的体验。PrimerCSSFramework的使用统计在StateofCSS调查中，它在2020年最佳CSS框架类别中排名第11位。0.62%的CSS开发人员已经在使用它并希望继续使用它。在Github上拥有92,000颗星、15,000个分叉和77个贡献者。选择PrimerCSS框架的理由1.可自定义的样式Primer提供各种大小和粗细的字体样式。据此，开发人员可以通过创建样式来增强网站的可读性和吸引力。2.优秀的配色方案Primer通过提供优秀的配色方案，可以增加内容的表现力。它的颜色工具和变体还为开发人员提供了各种主题的样式选项，而无需绑定到特定结构。3.Composablespacingratio它提供的composablebase-8spacing可以紧密匹配Github的内容。它的填充和边距确保水平和垂直的一致性。PrimeCSSFramework可以改进的地方1.缺乏知名度和评论Primer不像同类产品中的其他产品那样受欢迎。由于很少有用户使用过CSS框架，因此没有足够的评论来帮助新用户决定尝试它。2、社区支持不足由于Primer用户基数小，社区支持不足。知名客户MyStack、timelog、g59Ranking、CompleteToolset。总结我上面提到的11个CSS框架各有优缺点。大家可以根据实际项目的需要来选择。当然，请先通过测试，以确保您使用的框架不会出现任何CSS或HTML浏览器兼容性问题。原标题：2020年值得期待的11个最佳CSS框架，作者：VeetheeDixit
