2022 年 9 个最佳 CSS 框架

已发表: 2020-08-25

网络在不断发展，使前端开发更加高效和愉快的 CSS 框架也在不断发展。

爱他们或恨他们，CSS 框架将继续存在。没有前端经验的开发人员可以使用其中一些框架轻松实现用户友好的 UI。其他框架更复杂，面向高级用户。

无论您的经验水平如何，这些框架都将帮助您更快地创建漂亮的布局。在这个集合中，我们将介绍市场上最好的 CSS 框架，以便您可以根据自己的需要选择合适的。

为什么要使用 CSS 框架？

在进入列表之前，了解 CSS 框架如何以及为何成为现代前端开发不可或缺的一部分非常重要。

CSS 样式表很难组织、维护和重用。即使是很小的样式更改也需要您编写新的 CSS 规则，这有时可能会使您的代码变得一团糟。

即用型类是所有 CSS 框架的主要构建块。它们允许您将预定义的样式规则应用于 HTML 元素，例如边距、背景颜色等。

一些框架包括预先构建的组件，例如菜单、卡片或表格。使用这些组件可以让您创建用户友好的界面，而无需大量工作。

CSS 框架使您的样式工作流程高效、干净且可维护。通过使用以下框架之一，您将节省时间并避免 CSS 编码带来的许多麻烦。

1. 引导

我想不出关于不包含 Bootstrap 的 CSS 框架的对话。 Twitter 在 2011 年引入了该框架，以使开发人员可以轻松访问响应式网页设计。

从那时起，该项目已经发展到支持现代 CSS 并提供无数功能来提高您的前端生产力。与许多流行的东西一样，Bootstrap 确实受到了一些批评。

尽管有批评，这里有一些你应该考虑在你的项目中使用它的原因。

使用引导程序的原因

最流行的前端框架： Bootstrap 是现存最流行的开源项目之一。您总能找到遇到的问题的解决方案，并为几乎任何类型的项目发现大量免费和高级模板。
功能齐全：它不仅是一个开发框架，还是一个预构建的动态模板，包含无数现成的组件。默认支持几乎所有内容，从警报到模式再到导航栏。这可以使任何开发人员，即使没有前端经验，也可以更轻松地开发结构良好的页面。
可定制：使用 SASS 可以轻松定制 Bootstrap。您可以使用 npm 安装项目，导入您需要的部分，并使用 SASS 变量自定义几乎所有内容。学习如何使用 SASS 自定义 Bootstrap 网站可以显着缩短您的开发时间。
成熟且受支持：当作者决定退出时，许多较小的开源项目就会死掉。 Bootstrap 最初由 Twitter 引入，现在由数百名开发人员组成的社区维护，确保稳定发布和长期支持。

缺点

难以覆盖： Bootstrap 具有非常具体的设计和外观，如果您想要不同的风格，很难覆盖。由于它广泛使用!important CSS 规则，因此覆盖默认值可能会很棘手。
过度使用：人们不喜欢 Bootstrap 的主要原因是它的广泛使用。它提供了一种被过度使用的独特外观，以至于开发人员创造了“所有 Bootstrap 网站看起来都一样”这一短语。
依赖 jQuery：与其他仅支持 CSS 的框架不同，Bootstrap 4 的许多交互功能都依赖于 jQuery。这使得将它与 React 或 Vue 等 JavaScript 框架一起使用变得更加困难，但并非不可能。不过幸运的是，即将发布的 Boostrap 5 将删除 jQuery 依赖项。
包含繁重： Bootstrap 的所有功能都是有代价的——包含在您的项目中非常繁重。尽管您可以导入项目的一部分，但它不像此处列出的其他框架那样轻量级或模块化。

更多信息/下载 GitHub

2. 基础

Foundation 是经验丰富的开发人员的完美选择，他们享受自由但想要功能齐全的框架的强大功能。

实际上，Foundation 不仅仅是一个 CSS 框架，而是一系列前端开发工具。这些工具可以一起使用，也可以完全独立使用。

Foundation for Sites 是创建网页的核心框架，而 Foundation for Emails 允许您构建可以从任何设备读取的有吸引力的电子邮件。 Motion UI 是拼图的最后一块，使您能够创建高级 CSS 动画。

Foundation 由 ZURB 创建和维护，ZURB 是许多开源 Javascript 和 CSS 项目背后的公司。在设计这个框架时已经考虑了很多，ZURB 在他们自己的项目中广泛使用它。

使用粉底的理由

通用风格：与 Bootstrap 不同，Foundation 没有为其组件使用独特的风格。其广泛的模块化和灵活组件具有最小的样式，并且可以轻松定制。
功能齐全： Foundation 为几乎所有东西提供了内置组件。导航栏、多种容器类型和对开发人员友好的网格系统都包括在内。 Foundation 还允许您访问由开发团队或社区创建的预制 HTML 模板，您可以使用这些模板根据您的确切需求启动项目。
电子邮件设计：美学电子邮件模板是出了名的难以构建。为了支持较旧的电子邮件客户端，开发人员被迫编写 1990 年代的 HTML 代码。这使得提供响应式设计等现代功能变得困难。 Foundation for Emails 可以帮助您为任何客户端创建响应式电子邮件模板，包括旧版本的 Microsoft Outlook。
动画： Foundation 可以轻松地与 ZURB 的 Motion UI 库集成，让您可以使用内置效果创建过渡和动画。将 Motion UI 与 Foundation 一起使用将使您的设计栩栩如生！

缺点

难学： Foundation 提供了几乎太多的选择。它有无数的特性，而且比其他框架复杂得多。在开发前端布局时，它为您提供了很大的自由度，但首先，您需要完全了解一切是如何工作的。
依赖 Javascript： Foundation 的许多功能都依赖于 Javascript，使用 jQuery 或 Zepto。 Zepto 是一个与 jQuery 使用相同语法但占用空间更小的库。这使得 Foundation 不太适合 React 或 Angular 项目。 Zepto 也是一个鲜为人知的库，没有多少开发人员熟悉。

更多信息/下载 GitHub

3.布尔玛

Bulma 是 Bootstrap 的绝佳替代品，因为它具有现代代码和独特的美感。它易于使用和导入您的项目，并带有各种预制组件。

它因其简单的语法和简约但美观的设计而备受赞誉。它确实是一个可以使沉闷的网页看起来明亮和吸引人的框架。

在 GitHub 上有超过 40,000 颗星，它不再是一个小众框架，而是一股不可忽视的力量。

使用布尔玛的理由

美学设计：在我个人看来，Bulma 是这个列表中最好看的 CSS 框架。它采用简洁现代的设计——即使您不更改默认设置，您最终也会得到一个漂亮的网页。
现代：技术来来去去，曾经复杂的东西现在可能很简单。 CSS 的 flexbox 布局模块使得创建响应式布局变得更加容易，而 Bulma 是最早实现新原则的基于 flexbox 的框架之一。
对开发人员友好：虽然前端开发人员的目标是为最终用户提供出色的体验，但 Bulma 的创建者旨在为开发人员提供出色的体验。考虑到这一点，Bulma 提供了易于使用和记忆的命名约定。
易于定制： Bulma 的颜色、填充和许多默认属性都可以使用 SASS 进行定制。这样，您可以在几分钟内设置项目的默认值。
没有 Javascript： Bulma 不包含 JavaScript 功能。由于它是纯 CSS 的，因此可以轻松地与 Vue 或 React 等 Javascript 框架集成。

缺点

独特的风格：布尔玛的独特风格是一把双刃剑。由于它非常独特，如果它被过度使用，我们最终会得到看起来非常相似的网站，就像 Bootstrap 一样。
不太完整： Bulma 在许多情况下都在与 Boostrap 竞争，但在可访问性和其他企业级功能方面并不完整。

更多信息/下载 GitHub

4.顺风CSS

“大多数 CSS 框架做得太多”—— Tailwind 的座右铭清楚地解释了为什么它是一个轻量级框架，为开发人员提供自由。它没有特定的设计，而是让您更快地实现自己独特的风格。

它通过提供几乎不需要 CSS 编码的实用程序类来实现这一点。经验丰富的前端开发人员爱上了它的强大功能，并在他们的项目中使用它。

使用 Tailwind 的理由

原子 CSS：将元素居中、创建灵活的布局或使用特定的文本颜色是您通常在 CSS 中编写的所有内容。 Tailwind 通过提供强大的实用程序类使所有这些常见样式易于实现。这种方法有时被称为原子 CSS，其中 HTML 元素的类清楚地描述了它的外观。
- 例如， <div class="m-1 text-center bg-black">...</div>将显示一个边距为 1（即小边距）、居中文本和黑色背景的元素。
没有设计： Tailwind 没有预制组件或特定的设计语言。这意味着您不必覆盖现有样式，并且在实施自定义设计时可以提高工作效率。
可重用组件：尽管 Tailwind 不包含任何预先设计的组件，但它允许您创建自己的自定义组件，您可以在整个项目中重用这些组件。您还可以在官方网站上找到一些可以用作起点的组件示例。
强大的 PostCSS/SASS 集成：要充分利用 Tailwind，您需要安装并将其导入您的 SASS 或 PostCSS 项目。这使您可以利用 Tailwind 的所有功能来编写更有效的 CSS。 @apply语法将 Tailwind 中的规则“复制”到您的 SASS 或 CSS 代码中，因此您仍在编写 CSS，但这次拥有超能力！

缺点

陡峭的学习曲线：对于经验不足的开发人员来说，Tailwind 并不是最佳选择。由于它不提供预制组件，因此您需要充分了解前端技术的工作原理。 Tailwind 的学习曲线有些陡峭，因为您必须学习语法才能使用该框架高效工作。
不直接使用： Tailwind 可以作为捆绑的 CSS 文件添加到您的项目中，类似于其他框架。但是，官方安装指南解释说，如果您像这样添加框架，它的许多功能将不可用，并且您将无法访问压缩版本（27 KB 压缩与 348 KB 原始）。要充分利用 Tailwind，您需要知道如何使用 Webpack、Gulp 或其他前端构建工具。

更多信息/下载 GitHub

5. UIkit

UIKit 是一个模块化的前端框架，它允许你只导入你需要的特性。

它在 GitHub 上有超过 16,000 颗星，开发人员选择它是因为它简单的 API 和简洁的设计。

此外，UIKit 有一个专业版，为 WordPress 和 Joomla 提供主题页面，以及一个易于使用的页面构建器。

使用 UIKit 的理由

数十个组件： UIKit 包含数十个组件，允许您实现复杂的前端布局。它包括所有典型的实用程序和组件，但它更进一步，让您可以访问高级元素，如导航栏、画布外边栏和视差设计。
可扩展： UIKit 可以使用 LESS 或 SASS 预处理器轻松定制和扩展。
基于 UI 的定制器： UIKit 提供了一个基于 Web 的定制器，可让您实时定制设计，然后将 SASS 或 LESS 变量复制到您的项目中。 UIKit 的这一部分真的很神奇，可以帮助您立即开始新项目。

缺点

小型项目复杂：不建议经验不足的开发人员使用 UIKit，因为它是一个复杂的框架，需要您深入了解前端开发。它非常适合高级应用程序，但对于小型项目来说可能太多了。
较小的社区：尽管它的 npm 包每周被下载 27,000 次，但它并不像其他框架那样受欢迎。寻找答案或雇用具有 UIKit 经验的人不会像使用 Bootstrap 或 Foundation 那样容易。

更多信息/下载 GitHub

6.毫克

Milligram 是一个极简的 CSS 框架，周围有一个紧密的开发者社区。

Milligram 之所以出色的主要原因是，您可以在创建界面时从头开始，它旨在提高性能和生产力。

使用毫克的原因

极简 CSS 框架： Milligram 易于设置和上手。尽管它提供了强大的功能来提高生产力，但它在压缩时具有非常低的 2 KB 重量。
不固执己见：与其他框架不同，Milligram 没有默认样式。在实现自定义样式时，您无需重置或覆盖不符合您目标的属性。
易学：毫克非常简单，一天之内就能学会。阅读官方文档足以让您入门。

缺点

无模板：如果您正在寻找预制或类似模板的东西，那么 Milligram 不适合您。但是如果你想实现一个特定的设计，它可以大大提高你的生产力。
小社区： Milligram 有一个小而紧密的社区。寻找社区支持并不像使用更流行的 CSS 框架那么容易，但 Milligram 的简单性意味着您可能无论如何都不需要太多帮助。

更多信息/下载 GitHub

7.纯

Pure CSS 框架来自开源世界中一个意想不到的竞争者——雅虎。

这个微框架非常小，因为在使用所有模块时它只占用 3.7 KB（压缩）。它提供了可重用和响应式的 CSS 模块，可以添加到任何 Web 项目中。

使用 Pure 的理由

Tiny：每一行 CSS 都经过仔细考虑和编写，以使框架轻量级和高性能。
可定制：您可以以模块化方式导入 Pure 并仅实现您需要的内容。
支持良好：与社区项目不同，Pure 得到 Yahoo 的支持，这使得该项目成为长期使用的安全选择。
现成的组件： Pure 带有响应式和为现代网络构建的预制组件。

缺点

对于经验丰富的开发人员： Pure 不适合经验不足或小型团队，因为您需要创建自己的设计来使用该框架。

更多信息/下载 GitHub

8. 快子

Tachyons 是一个鲜为人知的 CSS 框架，它包括高级实用程序类，并为您提供了许多使用它们的方法。

该项目的文档解释了开发原则，其中最重要的是可重用性。 Tachyons 可帮助您了解项目的设计模式并提高整个项目的可重用性。

使用快子的原因

即用型组件：尽管 Tachyons 专注于提供出色的实用程序类以提高生产力，但官方文档也包含许多即用型组件。
多样化： Tachyons 提供可用于不同设置的功能模板，例如静态 HTML、Rails、React、Angular 等。
可重复使用： Tachyon 是创建可扩展设计系统的绝佳选择。由于越来越多的变体开始出现，这些系统通常会随着规模的扩大而崩溃。该框架允许您创建可重用的属性来构建多样化和灵活的组件。

缺点

主要用于 PostCSS： PostCSS 是使用 Tachyons 的主要方式，但不像 LESS 或 SASS 那样广泛使用。 Tachyons 确实提供与 SASS 的集成，但它并未得到广泛使用和支持。

更多信息/下载 GitHub

9.物化CSS

材料设计是许多网站和管理主题的首选设计语言。它由 Google 开发并在他们的项目中使用。

Materialize CSS 是一个开源的 CSS 框架，可以让您在自己的项目中轻松实现材料设计的外观和感觉。

它具有许多交互式组件，可加快开发速度并帮助为用户提供出色的体验。整个框架都使用动画来为用户提供视觉反馈，开发人员可以轻松使用。

使用 Materialise 的原因

材料设计：这种设计语言被广泛使用，人们对它很熟悉。这可以使您自己的创作易于为您的目标受众使用。
功能齐全： Materialize CSS 包括几乎所有东西的预制组件，但还带有更高级的 Javascript 功能来支持交互。
移动友好：您可以使用框架的类似移动设备的组件（例如浮动导航栏和滑动交互）创建渐进式 Web 应用程序。

缺点

严格的设计语言：如果你想做一些不接近材料设计的事情，最好避免使用 Materialise。
独立项目： Materialise 有一个活跃的社区，但它是一个小型且独立的项目，没有企业支持。

更多信息/下载 GitHub

哪个是最好的 CSS 框架？

此列表中的所有 CSS 框架，以一种或另一种方式，有助于提高您的工作效率。

包含更多功能和预制组件的那些，例如 Bootstrap、Bulma 和 Materialize，更适合经验不足的前端开发人员。

只提供实用程序类而不提供样式的框架，例如 Tailwind、Milligram 和 Pure，非常适合更有经验的开发人员。

我假设我们大多数人不希望不断地学习新的框架。适应和学习技术中的新事物是不可避免的，但理想情况下，我们使用的框架应该保持足够长的相关性，以证明学习它们的复杂性是合理的。

选择具有高水平社区支持的框架，例如 Bootstrap 或 Foundation，是一个安全的选择，因为大型社区支持该项目并且新想法不断被众包。

但另一方面，由于许多框架随着时间的推移变得臃肿，更新更好的选择开始出现。 Tailwind 和 Milligram 就是很好的例子，因为它们专注于提高编码效率，同时保持小尺寸和一组非常具体的功能。

如果您乐于承担小风险、学习新技术并接受一些小缺陷，那么更新的框架非常有前途。他们指望你的支持逐渐成熟。

如果您正在寻找长期解决方案并需要企业功能，那么采用成熟技术将是您的最佳选择。

网络上有许多 CSS 和 JavaScript 趋势，但您应该始终考虑成熟度和社区支持，以避免使用很快就会过时的框架。你可以使用这个列表，结合你自己的判断和个人喜好，来决定哪个是最适合你的 CSS 框架。

你对最好的 CSS 框架有任何疑问吗？ 在下面的评论部分让我们知道！