16个流行的CSS框架以提升前端开发效率

16 个流行的 CSS 框架

1. Bootstrap

Bootstrap 最初只是 Twitter 开发人员构建和共享的一个辅助项目。现在，它已成为响应式、移动优先网页设计中使用最广泛的 CSS 框架。数百万人使用 Bootstrap 制作简洁、一致和熟悉的网页布局。

主要功能：

• 响应式网格系统
• 预置 UI 组件
• 可定制、可扩展的主题
• 丰富的文档

包括 Twitter（显而易见）、Spotify 和 Udacity 在内的许多公司都在其网站上部分或全部使用了 Bootstrap 框架。

人们为什么喜欢 Bootstrap

喜欢 Bootstrap 的理由就是喜欢框架的理由–它简单、干净、易于使用。

有一个庞大的专家社区，他们拥有使用 Bootstrap 构建网站的丰富经验，几乎可以回答您能想象到的任何问题。

而且，虽然 Bootstrap 有时会被冠以 “虚无” 的名声，但如果您想超越开箱即用的功能，Bootstrap 的自定义功能还是非常强大的。

人们不喜欢 Bootstrap 的地方

到目前为止，对 Bootstrap 最大的质疑就是所有使用它的网站看起来都一样。

有人会说 “它们太无聊了”。

但这通常只是因为人们使用它的方式千篇一律，而没有花太多时间去尝试或定制。

还有一点需要注意的是，该框架整体上比较笨重。对于一个简单的网站来说，文件大小可能比你想象的要大。这可能也是 CSS 状态调查（State of CSS Survey）发现人们对 Bootstrap 的满意度各占一半的部分原因。

2. Tailwind CSS

Tailwind 或许既是一个框架，也是一场运动 。

它的创建者亚当-瓦坦（Adam Wathan）写了一篇关于 Tailwind 背后思想的宣言。从本质上讲，他的想法是 CSS 不应该是描述性和语义性的（例如”.header” 类），而应该是功能性的（例如”.center-flex-3″）。

他称之为 “实用至上的 CSS 框架”。

这种方法似乎对很多人都有效。在 CSS 状态调查中，Tailwind 的满意度最高，约为 80%。

主要特点：

• 实用工具类，方便设计样式
• 响应式设计功能
• 可定制的配置
• 组件友好型方法

许多知名科技公司，如 OpenAI (ChatGPT)、Shopify、Wealthfront 和 Loom，都在使用 Tailwind CSS。

为什么人们喜欢 Tailwind

由于 Tailwind 以实用为先，因此它拥有几乎无穷无尽的灵活性。

它并不像 Bootstrap 那样有预制布局。取而代之的是，你可以通过组合和分层类，将 HTML 元素放置在几乎无穷无尽的布局和 CSS 网格中。

人们喜欢这种方法的主要原因是，他们无需参考文档就能为 div 创建样式。由于实用工具类的命名非常直观（大部分情况下），因此无需在 CSS 库和标记之间不断切换，就能快速应用样式。

人们不喜欢 Tailwind 的地方

一言以蔽之： 人们不喜欢改变，对吧？

Tailwind 打破了 CSS 框架，甚至是更广泛的网络开发中的一些陈旧传统。

有很多理由可以解释为什么这种 CSS 代码方法是次优的。关注点分离是 CSS（以及大多数其他代码）编写的基本原则。而 Tailwind 则将这一理念贯彻到底。

Daisy UI

如果你不喜欢 Tailwind 的实用工具框架，还有一个由 Pouya Saadeghi 编写的名为 Daisy UI 的很棒的库，它是一个建立在 Tailwind CSS 基础上的插件，为你提供了一组感觉更像 Bootstrap 的类。

Daisy UI 为按钮、卡片、拨动按钮等常见 UI 组件提供了类名，让开发人员可以专注于项目中更重要的方面，而不是为基本元素设计样式。它建立在 Tailwind CSS 的基础之上，因此一切都可以使用实用工具类进行定制。

使用 Daisy UI 的一个显著好处是，它大大减少了你需要编写的类名数量，大约减少了 80%，并能使你的 HTML 大小缩小约 70%。此外，它还为 Tailwind CSS 添加了一组可自定义的颜色名称，让开发人员无需添加新的类名就能灵活地创建黑暗模式和其他主题。

3. Bulma

Bulma 是一款基于 Flexbox 的轻量级 CSS 框架。

该框架的语法是纯语言的，这意味着它在很大程度上依赖于描述性的实用类或修饰符，如”.button” 和 “.is-large”。

主要功能：

• 基于 Flexbox 的网格系统
• 模块化架构
• 使用 Sass，便于自定义
• 极简的代码和设计

使用 Bulma 的知名网站示例 CSS Ninja 和 Signal。

为什么人们喜欢 Bulma

Bulma 有点像 CSS 框架中的乐高积木。它非常简单易懂，非常适合初学者或只想快速解决问题的人。

通过应用一些逻辑命名的类，你可以构建模块、应用CSS 动画并创建更高级的样式。它不依赖 JavaScript，因此可以与几乎所有 JavaScript 框架结合使用。

人们不喜欢 Bulma 的地方

Bulma 的简单性可能是一把双刃剑。

作为 CSS 框架的教程或入门工具，Bulma 是一款不错的工具，但更高级的开发者可能会抱怨它缺乏更强大选项的复杂性或可扩展性。

4. Foundation

与 Bulma 相反的是 Foundation。

Foundation 毫不掩饰自己的先进性，因此与其他一些选择相比相当复杂。它是一个响应式前端框架，专为移动优先开发而设计，可用于网站和电子邮件，全球约有 50 万个网站在使用它。

主要特点：

• 响应式网格系统
• 全面的用户界面组件集
• 可定制的 Sass 变量
• 与流行的前端工具和库集成

为什么人们喜欢 Foundation

Foundation 是一种 O.G.。

它在千禧年之前就已经存在，这意味着许多开发人员都精通 Foundation，熟悉它的语法和惯例。

它也是一款成熟的产品。它有大量的功能、丰富的文档和资源。

此外，它还被认为是可访问性最好的框架之一。

人们不喜欢 Foundation 的地方

与大多数成熟的产品一样，Foundation 与现代的轻量级框架相比会显得有些笨重 。

它积累了大量需要的功能和自定义选项，这让代码库和文件大小变得有点沉重。此外，由于约定俗成的习惯已经改变，对于习惯使用 Tailwind 或 Bootstrap 的初学者来说，学习曲线有点陡峭。

5. Semantic UI

“一切任意的东西都是可变的”。

这就是 Semantic UI 的信条。

该框架的核心是帮助网站和网络应用程序构建和扩展熟悉的界面。

主要特点：

• 直观且人类可读的类名
• 广泛的用户界面组件和布局
• 可定制的主题和样式
• 与Angular等流行的JavaScript库和框架集成

许多网站和公司都在使用语义用户界面（Semantic UI），其中包括埃森哲（Accenture）和Snapchat。

为什么人们喜欢 Semantic UI

Semantic UI（语义用户界面）具有简单易懂的语法，可以轻松地从其大量的用户界面组件（包括按钮、模态、卡片、切换、文本字段等等）中构建出来。

不过，最受欢迎的可能还是主题和定制功能。

Semantic 包含一个主题库，其中有 3000 多个可自定义的变量，然后在所有用户界面组件中继承。

人们不喜欢 Semantic UI 的地方

由于 Semantic 是如此专注于用户界面，又是如此广泛，因此它可能包含大量在您的项目中未曾使用过的代码。这就意味着，有些人会发现，与包含更多内容的框架相比，Semantic UI 对于更简单的项目来说过于庞大。

6. Materialize

Materialize CSS 框架基于 Google 的 Material Design 原则。

它强调大胆的视觉设计和注重用户体验的动画（动作）。

Materialize 相当受欢迎，在 GitHub 上拥有 38,000 多颗星。

主要特点：

• 受 Material Design 启发的组件和样式
• 响应式网格系统
• Sass 驱动的自定义
• 内置 JavaScript 插件

Materialize 广泛应用于各种网站，但其展示的大多数网站都是小型企业和个人项目。

为什么人们喜欢 Materialize

Materialize 是一款简单实用的网站解决方案。他们并不提供真正的 “月球”，但这正是人们喜欢它的原因之一。

人们不喜欢 Materialize 的原因

一如既往，简单也意味着限制。Materialize 不像其他框架那样健壮或可扩展，它的特定动作依赖于 JavaScript。

7. UIkit (UI Kit)

UIkit 是另一种专注于网站和网络应用程序界面的模块化框架，它的流行程度略低于 Semantic UI，但这并不意味着它的功能就不强大。

UIkit 是一个以用户界面为重点的框架，被许多网站和网络应用程序所采用，其中包括 Crunchyroll、Moqups 和 Rover。

主要特点：

• 具有选择性导入功能的模块化架构（超大！）。
• 响应式网格系统
• 用于自定义的 Sass 变量和混合组件
• 丰富的 UI 组件库

为什么人们喜欢 UIkit

UIkit 在市场份额上可能稍逊一筹，但它在占用空间、文件大小和复杂性方面也更胜一筹。

UIkit 提供了一个极其轻量级的综合用户界面组件库，但并没有损失太多的功能。它可高度自定义，设置简单，既可使用提供的构建过程，也可使用自己的构建过程（使用 Less）。

人们不喜欢 UIkit 的地方

UIkit 最大的缺点可能就是它比一些更大、更流行的框架更低调。

但是，你知道，这让它很酷，对吗？

说句题外话：UIkit 的用户社区规模较小，这可能会增加找到问题答案或特定实现教程的难度。

8. Ant Design

Ant Design 不仅仅是一个 CSS 框架，它还是一个设计系统，其中包含一套高质量的 React 组件，用于构建丰富的交互式用户界面。

Ant Design 由蚂蚁金服集团（阿里巴巴的母公司）开发和发布，与 Alphabet 和 X（前身为 Google 和 Twitter）等美国科技公司发布的设计系统类似。

主要特点：

• 全面的用户界面组件集
• 统一的设计语言和风格
• 可定制的主题和外观
• 丰富的文档和社区支持

使用 Ant Design 的知名网站示例（毫不奇怪）： 阿里巴巴

为什么人们喜欢 Ant Design

Ant Design 为设计师和开发人员提供了极为强大的资源库。除了 CSS 框架之外，它还有一整套可以直接应用于自己项目的系统（不，是语言）。

这里有一个庞大的社区，这个设计系统已经在各个企业和项目中得到了尝试、测试和验证，并创造了数十亿美元的收入。

可以把它想象成网络项目的特许经营模式。

人们不喜欢 Ant Design 的地方

正如你所猜测的那样，功能 越多，文件越大。

整个 Ant Design 系统（未精简）重约 100MB。

另一个限制是，Ant Design 是专门为 React 项目而设计的。如果您使用的是其他 JavaScript 库，可能很难调整组件。

9. Primer

作为 GitHub 设计和 UI 组件背后的 CSS 框架，Primer 是开发者以及开发者优先网站和应用程序的超级受欢迎的框架选择。

它是为特定目的而构建的，任何花时间在软件仓库中扎根的人都会对它感到熟悉。

主要特点：

• 选择性导入的模块化架构
• 响应式网格系统
• Sass 驱动的自定义
• 内置可访问性功能

为什么人们喜欢 Primer

Primer 就像一块优秀的基础架构；它低调而简单，却能出色地完成工作。此外，知道 GitHub 背后的团队创建（并维护）了这个库，对项目的持久性和可靠性也是一大促进。

人们不喜欢 Primer 的地方

正如你可能已经猜到的，GitHub 的设计美学并不适合每一个项目。

因此，人们主要抱怨 Primer 不像其他框架那样通用，对于不是为开发人员构建的项目或网站来说，Primer 并不是理想的选择。此外，它的用户界面组件集也很有限，这在 GitHub 生态系统中是合理的。

10. Tachyons

Tachyons 框架承诺 “快速加载、高度可读、100% 响应界面”。

Tachyons 使用最少的 CSS，非常适合快速创建主页、个人作品集或项目网站。

主要特点：

• 带有实用类的 Atomic CSS 架构
• 响应式设计功能
• 最小化设置和配置
• 文件小，加载速度快

为什么人们喜欢 Tachyons

人们喜欢 Tachyons 是因为它是一个快速、简单的框架。它重量轻、加载快，非常适合小型项目、个人网站和其他简单的使用案例。

它就像框架中的本田思域（基本款！）。

你知道你会得到什么。它很好用。而且值得信赖。

人们不喜欢 Tachyons 的地方

将 Tachyons 用于更复杂或视觉效果更复杂的项目需要大量的工作，这意味着它不会是那些只想制作一两个简单的网格页面的人的首选。

11. Pure (Pure CSS)

雅虎！

这个名字你不会经常听到。(除非你在 “危险” 游戏中回答关于Google 的替代品的问题，也许是这样）。

但是，他们的 CSS 框架 Pure CSS 却在黑客和程序员中颇受欢迎。Pure CSS 在 GitHub 上拥有 23k 星级和 2.5k forks，绝对是本列表中最受欢迎的选择之一。

主要特点：

• 小巧轻便
• 响应式网格
• 基于 Normalize.css 构建
• 开箱即用的表单处理

为什么人们喜欢 Pure

PureCSS 是最受欢迎的自定义 CSS 或其他框架的附加组件。它超轻量级，提供了许多有用的组件，可以轻松连接到现有系统。

这使得在现有堆栈中添加网格、表单、按钮、表格等功能变得非常简单。

人们不喜欢 Pure 的地方

Pure 最适合作为插件而非独立框架使用。它不像其他解决方案那样有一个全面的库，也不提供主题或其他功能，因此只需快速编辑几下就能轻松定制项目的外观和感觉。

12. Material Design Lite

说到谷歌，除了 Materialize，他们还开源了 Material Design Lite 框架。顾名思义，它是受 Material Design 启发的框架的一个更轻、更简单的版本。

它使用了更少的 JavaScript，并且可以在更广泛的设备和浏览器上使用。

通过访问 Google Wallet、Google for Work、Google 开发者网站等网站，你可以看到 Material Design Lite (MDL) 的全貌。

主要功能：

• Material Design 理念和 UI 组件
• 开箱即用的大量组件，如按钮、卡片、滑块、旋转器等
• 无外部依赖性
• 编辑选项

为什么人们喜欢 MDL

MDL 为应用程序、表单等提供了功能超强的组件集。

由于它是根据 Material Design 原则构建的，因此可用性和可访问性在设计和组件中都处于前沿和中心位置。

人们不喜欢 MDL 的地方

在现阶段，MDL 在技术上已经折旧，因此系统不会获得任何更新或支持。

除此以外，整个美学设计给人的感觉有点局限。无论好坏，它给人的感觉很像是为谷歌产品打造的。

13. Spectre.css

Spectre 是另一个快速启动和运行的不错选择。这个轻量级、简约的框架为你提供了许多从零开始启动网站所需的构建模块和熟悉的用户界面组件。

主要特点：

• 文件小（压缩后约 10KB）
• 基于 Flexbox 的网格
• 内置实用工具类

为什么人们喜欢 Spectre

Spectre 是简洁、极简、干净美观的理想之选。这里的重点是纯粹的可用性和效率–你不会得到很多额外的钟声或口哨声，但它能完成工作。

人们不喜欢 Spectre 的地方

如果你正在寻找一个拥有高级主题选项、繁荣社区和大量文档的庞大框架，那么它可能并不适合你。

Spectre 则更低调一些。它是一款能够胜任工作的工具，但其受欢迎程度和采用率远不及 Foundation 或 Bootstrap。

14. Milligram

Milligram 是另一个鲜为人知的框架，它非常 小巧轻便。甚至比我们介绍过的其他小型框架还要小巧轻便。

它是极简设计的终极选择，也是快速、直接的项目启动解决方案。

主要特点：

• 极简设计
• 非常小（约 2kb gzip）
• Flexbox 网格系统

人们为何喜爱 Milligram

Milligram 可能是最轻、最简单的 CSS 框架，你可以用它来构建一个开箱即用的项目。它拥有许多其他框架最重要的功能，但占用空间却小得惊人。

它的惯例和类也让它非常容易上手。

人们不喜欢 Milligram 的地方

Milligram 与榜单上其他知名度较低的系统一样，也存在一些缺点。整体知名度较低意味着社区支持较少。即便如此，Milligram 的文档与更大型的框架不相上下，而且其简洁性可能会减少对额外帮助的需求。

15. Water.css

Water 是一个无类的 CSS 系统，你只需将其放入静态网站即可。它与其他框架的设计方式不同。相反，它能将样式直接应用到页面上的 HTML 元素，为你提供一个快速的设计系统，而无需（或无法）构建更复杂的布局。

主要特点：

• 无类
• 极其轻量级
• 两种开箱即用的主题：浅色和深色模式。
• 完全响应

为什么人们喜欢 Water

Water 是快速 CSS 解决方案、样式模板或简单模型的绝佳选择。

它的功能与包装盒上写的一样，是一款超快、省事的解决方案。

人们不喜欢 Water 的原因

对于任何复杂的网站或应用程序项目来说，Water 都是行不通的。它没有网格，缺少许多大型项目所需的组件，最终以牺牲定制性或可扩展性为代价，将简洁性放在了首位（达到了极致）。

16. Vanilla

Vanilla Framework 或 Vanilla CSS（不要与俗称的 vanilla CSS 混淆，后者指的是基础或传统 CSS）是由 Ubuntu 的母公司 Canonical 创建和使用的一个框架。

主要特点：

• 适用于大型网站项目的可扩展架构
• 模块化系统
• 基于 Sass

为什么人们喜欢 Vanilla

虽然 Vanilla 没有 Bootstrap 等大型框架那么受欢迎，但它拥有企业级产品所需的支持、资源、文档，甚至是支持。

在可访问性方面有非常详细的分析，在与不同浏览器（具体到版本）和屏幕的兼容性方面也有细致入微的说明。

组件和样式也是简单而通用的。

人们不喜欢 Vanilla 的地方

对于某些人来说，这个项目可能确实有点 “香草”。也就是说，设计美学在很大程度上是中性和功能性的，没有太多亮点。

为你的项目选择最佳 CSS 框架

既然我们已经分享了 16 个超棒的选项，那么如何选择正确的选项呢？

和往常一样，这里没有对错之分，但有一些关键问题可以帮助你缩小选择范围。

项目要求和目标

了解您正在构建的项目类型是最好的开端。如果你正在为一个小项目或个人使用创建一个简单的网站，那么可以选择像 Water 或 Milligram 这样轻量级的简单系统。

但如果你需要更强大的系统，你可以选择 Foundation 或 Bootstrap。

学习曲线和易用性

接下来，考虑系统的复杂性与您或您团队的能力之间的关系。你是研究新 CSS 框架的专家吗？或者这是你第一次使用非自制的东西？

了解如何使用 CSS 框架本身就需要一些学习。如果你从未使用过框架，最好选择一个简单的入门选项。然后，一旦你掌握了元的窍门，就可以深入学习更复杂的系统了。

可定制性和灵活性

您是否需要严格遵循现有的品牌或设计准则？

那么你需要选择一个内置主题和定制功能的选项，以便轻松匹配必要的风格和设计系统。

如果你的适应能力较强，你可以选择一个风格独特但缺乏灵活性的系统。

社区支持和资源

拥有一个使用该框架的社区可以让一切变得不同。查找社区论坛、Discord 服务器或 subreddits，看看有多少人在帮助其他用户，以及每个框架的社区有多活跃。

性能和文件大小

请务必考虑您所评估的框架的文件大小和性能。

网站性能受很多因素（如虚拟主机）的影响，而 CSS 也会对页面、文件大小和加载速度产生很大影响。