在我那个年代，样式表就是样式表。

你需要为每个元素手工编写 CSS。我们喜欢这种方式。

自原始 HTML 页面时代以来，CSS 已经有了长足的发展，其中最重要的发展之一就是 CSS 框架的创建和普及。这些工具让开发人员和设计人员在构建和启动新项目时，无论项目大小，都变得容易了许多。

它们还对用户和我们体验网络的方式产生了巨大影响。框架为网站和网络应用程序的用户界面和用户体验创建了一种共享语言，使几乎所有网站都更容易理解、浏览和使用。

如今，互联网上每 4 个网站中就有 1 个使用 CSS 框架。

在本文中，我们将探讨 16 种最流行的框架，以及从企业到独立黑客如何使用它们。

CSS 框架是一个预先准备好的代码库，可帮助实现快速、一致的网站样式和布局。框架包括为常用设计元素和组件预先编写的可重复使用代码，可轻松应用于基础 HTML，从而创建熟悉且一致的用户界面或网站设计。

前端开发人员使用 CSS 框架可快速在网页和应用程序上部署响应式网格、样式表单、按钮或其他重要的用户界面元素。

好吧，但为什么要使用框架呢？

难道你就不能自己构建所有这些东西吗？当然可以。但这正是问题的关键所在。在这个世界上，设计师和开发人员为每个网站或应用程序重复编写相同的基本 CSS，而框架正是这种情况的必然结果。

为什么不只写一次，然后到处使用呢？这就是框架存在的原因。

人们使用框架的最简单原因是什么？速度。框架开箱即带大量元素和样式，否则您在开发网站时就需要从头开始。

那么，为什么要重新创建呢？

许多开发人员和网页设计师还将框架作为一种工具，用于在构建自定义设计系统之前快速构建新网站或应用程序的原型。

使用 CSS 框架的另一个主要好处是，您的所有样式、用户界面元素、按钮等开箱即可保持一致。你无需花费数小时（或数天、数周或数年）来调整单个样式，以确保它们具有相同的填充、间距和字体大小。

由于框架已经经过精心设计，所有繁琐的工作都已完成。

还有一个好处是，最流行的 CSS 框架被广泛使用，有助于网站看起来让用户感觉熟悉。从用户体验的角度来看，这一点非常重要。

最后但并非最不重要的一点是，要考虑可访问性。大多数流行的框架都是针对各种设备和屏幕尺寸而构建的，因此能让更多用户使用。

实话实说：构建一个完美的响应式布局是一件痛苦的事。

有太多的变量和因素需要考虑。然后再推断数以百万计的设备，你的完美网格系统很快就会变得一团糟。

现代 CSS 框架再次为你解决了这个问题。它们已经完成了构建像素完美的响应式设计系统的艰苦工作（和数学计算）。你所要做的就是应用正确的 CSS 类。

如果你喜欢维护别人的代码、创建文档和解读别人的注释，请举手。

那可不行。

由于大多数框架都附带有大量的文档库和用户社区，因此你可以从共同的代码库和极其详尽的文档信息中获益，了解如何使用该系统。

此外，大多数框架都是开源项目。这意味着你可以自由使用、改编，甚至（在某些情况下）重新发布你自己的版本（如果你喜欢的话）。

CSS 框架并非放之四海而皆准。它们有不同的形式，每一类都有自己的重点和优势。了解 CSS 框架的分类有助于你了解每个框架的预期功能。

现在，让我们来看看 CSS 框架的主要类型。

这是 CSS 框架的起源。基于组件的框架提供了一套预制的用户界面组件，开发人员可以将其插入应用程序，快速组装界面。这样做的目的是提供一个模块化和可重复使用的设计系统，帮助你创建一致且具有视觉吸引力的网络应用程序，而无需每次都从头开始。

实用优先框架背后的理念是，CSS 不应该是描述性的，也不应该严重依赖于你的标记（例如，表示导航栏或网站页眉的”.header” 类），而应该基于功能（例如，”.text-align-center”）。

实用为先的框架不会将应用程序的设计局限于框架所提供的内容，而是提供只做一件事（或一小部分事）的 CSS 样式和类作为构建模块，以扩展和定制应用程序的设计，从而超越基于组件的框架的限制。

随着 React 等 JavaScript 库的兴起，CSS-in-JS 框架应运而生，通过在 JavaScript 标记中包含 CSS，开发人员可以直接在 JavaScript 中操作样式。

CSS-in-JS 利用 JavaScript 的动态特性，提供了一种根据用户数据和交互编写交互式 CSS 样式的方法，这种方法具有良好的性能。

还有更多类型的 CSS 框架可供选择，但这三个类别涵盖了最著名的几类。

需要注意的是，这些关注点之间并没有细微的界限。大多数 CSS 框架都可以重叠为多个类别，例如，基于组件的框架可以为你提供实用工具，而基于实用工具的框架也可以为你提供组件。

显示 CSS 框架某些类别及其相互交织方式的示意图

例如，上图展示了 CSS 框架的三个类别如何相互交织。

CSS 框架的范围相当广泛，但它们大多具有一些共同的关键特性。

网格让网络变得…. “圆”？它们让网页变成比例完美的方框。这就是它们的作用。

大多数 CSS 框架都有一个内置的网格系统，可帮助创建灵活多变的网站布局。该系统通常提供大量自定义功能，可轻松适应不同的屏幕尺寸、分辨率和页面结构。

大多数框架开箱即用的另一个功能是媒体查询，可根据设备特性自动调整样式。

从头开始开发这些系统可能会比较复杂和繁琐，但它们是现代网络的重要组成部分，可确保内容在不同设备上正常缩放和显示。

大多数 CSS 框架都带有一个预构建、预风格化的用户界面组件库。如按钮、表单、表格、拨动按钮等，只需应用一个简单的类即可使用。

这样就能更快地构建界面和页面，而且还能为整个网站（以及整个网络）创建一致的外观和熟悉的用户界面奠定基础。

这里分享的许多框架都带有内置的自定义和主题选项。这样就可以非常简单地应用品牌颜色、首选字体和其他个性化修饰，从而改变网站的外观和感觉，使其与品牌风格相匹配。

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

主要功能：

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

人们为什么喜欢 Bootstrap

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

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

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

人们不喜欢 Bootstrap 的地方

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

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

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

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

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 添加了一组可自定义的颜色名称，让开发人员无需添加新的类名就能灵活地创建黑暗模式和其他主题。

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

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

主要功能：

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

为什么人们喜欢 Bulma

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

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

人们不喜欢 Bulma 的地方

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

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

与 Bulma 相反的是 Foundation。

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

主要特点：

为什么人们喜欢 Foundation

Foundation 是一种 O.G.。

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

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

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

人们不喜欢 Foundation 的地方

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

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

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

这就是 Semantic UI 的信条。

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

主要特点：

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

为什么人们喜欢 Semantic UI

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

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

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

人们不喜欢 Semantic UI 的地方

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

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

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

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

主要特点：

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

为什么人们喜欢 Materialize

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

人们不喜欢 Materialize 的原因

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

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

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

主要特点：

为什么人们喜欢 UIkit

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

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

人们不喜欢 UIkit 的地方

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

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

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

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 库，可能很难调整组件。

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

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

主要特点：

为什么人们喜欢 Primer

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

人们不喜欢 Primer 的地方

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

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

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

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

主要特点：

为什么人们喜欢 Tachyons

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

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

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

人们不喜欢 Tachyons 的地方

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

雅虎！

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

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

主要特点：

为什么人们喜欢 Pure

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

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

人们不喜欢 Pure 的地方

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

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

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

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

主要功能：

为什么人们喜欢 MDL

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

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

人们不喜欢 MDL 的地方

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

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

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

主要特点：

为什么人们喜欢 Spectre

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

人们不喜欢 Spectre 的地方

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

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

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

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

主要特点：

人们为何喜爱 Milligram

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

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

人们不喜欢 Milligram 的地方

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

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

主要特点：

为什么人们喜欢 Water

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

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

人们不喜欢 Water 的原因

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

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

主要特点：

为什么人们喜欢 Vanilla

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

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

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

人们不喜欢 Vanilla 的地方

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

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

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

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

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

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

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

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

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

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

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

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

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

希望这份 CSS 框架列表能让你知道下一个项目该从哪里入手。

无论你是要创建下一个 Facebook，还是要创建一个展示你的摇滚收藏的个人网站，我们都乐于帮助创意者和创业者构建一个美丽的互联网。