自原始HTML页面时代以来，CSS已经有了长足的发展，其中最重要的发展之一就是CSS框架的创建和普及。这些工具让开发人员和设计人员在构建和启动新项目时，无论项目大小，都变得容易了许多。
它们还对用户和我们体验网络的方式产生了巨大影响。框架为网站和网络应用程序的用户界面和用户体验创建了一种共享语言，使几乎所有网站都更容易理解、浏览和使用。
在本文中，我们将探讨16种最流行的框架，以及从企业到独立黑客如何使用它们。
CSS框架是一个预先准备好的代码库，可帮助实现快速、一致的网站样式和布局。框架包括为常用设计元素和组件预先编写的可重复使用代码，可轻松应用于基础HTML，从而创建熟悉且一致的用户界面或网站设计。
前端开发人员使用CSS框架可快速在网页和应用程序上部署响应式网格、样式表单、按钮或其他重要的用户界面元素。
好吧，但为什么要使用框架呢？
难道你就不能自己构建所有这些东西吗？当然可以。但这正是问题的关键所在。在这个世界上，设计师和开发人员为每个网站或应用程序重复编写相同的基本CSS，而框架正是这种情况的必然结果。
为什么不只写一次，然后到处使用呢？这就是框架存在的原因。
人们使用框架的最简单原因是什么？速度。框架开箱即带大量元素和样式，否则您在开发网站时就需要从头开始。
那么，为什么要重新创建呢？
许多开发人员和网页设计师还将框架作为一种工具，用于在构建自定义设计系统之前快速构建新网站或应用程序的原型。
使用CSS框架的另一个主要好处是，您的所有样式、用户界面元素、按钮等开箱即可保持一致。你无需花费数小时（或数天、数周或数年）来调整单个样式，以确保它们具有相同的填充、间距和字体大小。
由于框架已经经过精心设计，所有繁琐的工作都已完成。
还有一个好处是，最流行的CSS框架被广泛使用，有助于网站看起来让用户感觉熟悉。从用户体验的角度来看，这一点非常重要。
最后但并非最不重要的一点是，要考虑可访问性。大多数流行的框架都是针对各种设备和屏幕尺寸而构建的，因此能让更多用户使用。
实话实说：构建一个完美的响应式布局是一件痛苦的事。
有太多的变量和因素需要考虑。然后再推断数以百万计的设备，你的完美网格系统很快就会变得一团糟。
现代CSS框架再次为你解决了这个问题。它们已经完成了构建像素完美的响应式设计系统的艰苦工作（和数学计算）。你所要做的就是应用正确的CSS类。
如果你喜欢维护别人的代码、创建文档和解读别人的注释，请举手。
那可不行。
由于大多数框架都附带有大量的文档库和用户社区，因此你可以从共同的代码库和极其详尽的文档信息中获益，了解如何使用该系统。
此外，大多数框架都是开源项目。这意味着你可以自由使用、改编，甚至（在某些情况下）重新发布你自己的版本（如果你喜欢的话）。
CSS框架并非放之四海而皆准。它们有不同的形式，每一类都有自己的重点和优势。了解CSS框架的分类有助于你了解每个框架的预期功能。
现在，让我们来看看CSS框架的主要类型。
这是CSS框架的起源。基于组件的框架提供了一套预制的用户界面组件，开发人员可以将其插入应用程序，快速组装界面。这样做的目的是提供一个模块化和可重复使用的设计系统，帮助你创建一致且具有视觉吸引力的网络应用程序，而无需每次都从头开始。
实用为先的框架不会将应用程序的设计局限于框架所提供的内容，而是提供只做一件事（或一小部分事）的CSS样式和类作为构建模块，以扩展和定制应用程序的设计，从而超越基于组件的框架的限制。
随着React等JavaScript库的兴起，CSS-in-JS框架应运而生，通过在JavaScript标记中包含CSS，开发人员可以直接在JavaScript中操作样式。
CSS-in-JS利用JavaScript的动态特性，提供了一种根据用户数据和交互编写交互式CSS样式的方法，这种方法具有良好的性能。
还有更多类型的CSS框架可供选择，但这三个类别涵盖了最著名的几类。
显示CSS框架某些类别及其相互交织方式的示意图
例如，上图展示了CSS框架的三个类别如何相互交织。
CSS框架的范围相当广泛，但它们大多具有一些共同的关键特性。
大多数CSS框架都有一个内置的网格系统，可帮助创建灵活多变的网站布局。该系统通常提供大量自定义功能，可轻松适应不同的屏幕尺寸、分辨率和页面结构。
大多数框架开箱即用的另一个功能是媒体查询，可根据设备特性自动调整样式。
从头开始开发这些系统可能会比较复杂和繁琐，但它们是现代网络的重要组成部分，可确保内容在不同设备上正常缩放和显示。
大多数CSS框架都带有一个预构建、预风格化的用户界面组件库。如按钮、表单、表格、拨动按钮等，只需应用一个简单的类即可使用。
这样就能更快地构建界面和页面，而且还能为整个网站（以及整个网络）创建一致的外观和熟悉的用户界面奠定基础。
主要功能：
包括Twitter（显而易见）、Spotify和Udacity在内的许多公司都在其网站上部分或全部使用了Bootstrap框架。
人们为什么喜欢Bootstrap
有一个庞大的专家社区，他们拥有使用Bootstrap构建网站的丰富经验，几乎可以回答您能想象到的任何问题。
人们不喜欢Bootstrap的地方
到目前为止，对Bootstrap最大的质疑就是所有使用它的网站看起来都一样。
主要特点：
许多知名科技公司，如OpenAI(ChatGPT)、Shopify、Wealthfront和Loom，都在使用TailwindCSS。
为什么人们喜欢Tailwind
由于Tailwind以实用为先，因此它拥有几乎无穷无尽的灵活性。
它并不像Bootstrap那样有预制布局。取而代之的是，你可以通过组合和分层类，将HTML元素放置在几乎无穷无尽的布局和CSS网格中。
人们喜欢这种方法的主要原因是，他们无需参考文档就能为div创建样式。由于实用工具类的命名非常直观（大部分情况下），因此无需在CSS库和标记之间不断切换，就能快速应用样式。
人们不喜欢Tailwind的地方
一言以蔽之：人们不喜欢改变，对吧？
Tailwind打破了CSS框架，甚至是更广泛的网络开发中的一些陈旧传统。
DaisyUI
DaisyUI为按钮、卡片、拨动按钮等常见UI组件提供了类名，让开发人员可以专注于项目中更重要的方面，而不是为基本元素设计样式。它建立在TailwindCSS的基础之上，因此一切都可以使用实用工具类进行定制。
使用DaisyUI的一个显著好处是，它大大减少了你需要编写的类名数量，大约减少了80%，并能使你的HTML大小缩小约70%。此外，它还为TailwindCSS添加了一组可自定义的颜色名称，让开发人员无需添加新的类名就能灵活地创建黑暗模式和其他主题。
使用Bulma的知名网站示例CSSNinja和Signal。
为什么人们喜欢Bulma
Bulma有点像CSS框架中的乐高积木。它非常简单易懂，非常适合初学者或只想快速解决问题的人。
人们不喜欢Bulma的地方
Bulma的简单性可能是一把双刃剑。
作为CSS框架的教程或入门工具，Bulma是一款不错的工具，但更高级的开发者可能会抱怨它缺乏更强大选项的复杂性或可扩展性。
为什么人们喜欢Foundation
Foundation是一种O.G.。
它在千禧年之前就已经存在，这意味着许多开发人员都精通Foundation，熟悉它的语法和惯例。
它也是一款成熟的产品。它有大量的功能、丰富的文档和资源。
此外，它还被认为是可访问性最好的框架之一。
人们不喜欢Foundation的地方
与大多数成熟的产品一样，Foundation与现代的轻量级框架相比会显得有些笨重。
该框架的核心是帮助网站和网络应用程序构建和扩展熟悉的界面。
许多网站和公司都在使用语义用户界面（SemanticUI），其中包括埃森哲（Accenture）和Snapchat。
为什么人们喜欢SemanticUI
SemanticUI（语义用户界面）具有简单易懂的语法，可以轻松地从其大量的用户界面组件（包括按钮、模态、卡片、切换、文本字段等等）中构建出来。
不过，最受欢迎的可能还是主题和定制功能。
Semantic包含一个主题库，其中有3000多个可自定义的变量，然后在所有用户界面组件中继承。
人们不喜欢SemanticUI的地方
由于Semantic是如此专注于用户界面，又是如此广泛，因此它可能包含大量在您的项目中未曾使用过的代码。这就意味着，有些人会发现，与包含更多内容的框架相比，SemanticUI对于更简单的项目来说过于庞大。
它强调大胆的视觉设计和注重用户体验的动画（动作）。
Materialize广泛应用于各种网站，但其展示的大多数网站都是小型企业和个人项目。
为什么人们喜欢Materialize
人们不喜欢Materialize的原因
一如既往，简单也意味着限制。Materialize不像其他框架那样健壮或可扩展，它的特定动作依赖于JavaScript。
UIkit是一个以用户界面为重点的框架，被许多网站和网络应用程序所采用，其中包括Crunchyroll、Moqups和Rover。
为什么人们喜欢UIkit
UIkit在市场份额上可能稍逊一筹，但它在占用空间、文件大小和复杂性方面也更胜一筹。
UIkit提供了一个极其轻量级的综合用户界面组件库，但并没有损失太多的功能。它可高度自定义，设置简单，既可使用提供的构建过程，也可使用自己的构建过程（使用Less）。
人们不喜欢UIkit的地方
UIkit最大的缺点可能就是它比一些更大、更流行的框架更低调。
但是，你知道，这让它很酷，对吗？
说句题外话：UIkit的用户社区规模较小，这可能会增加找到问题答案或特定实现教程的难度。
AntDesign由蚂蚁金服集团（阿里巴巴的母公司）开发和发布，与Alphabet和X（前身为Google和Twitter）等美国科技公司发布的设计系统类似。
使用AntDesign的知名网站示例（毫不奇怪）：阿里巴巴
为什么人们喜欢AntDesign
AntDesign为设计师和开发人员提供了极为强大的资源库。除了CSS框架之外，它还有一整套可以直接应用于自己项目的系统（不，是语言）。
这里有一个庞大的社区，这个设计系统已经在各个企业和项目中得到了尝试、测试和验证，并创造了数十亿美元的收入。
可以把它想象成网络项目的特许经营模式。
人们不喜欢AntDesign的地方
正如你所猜测的那样，功能越多，文件越大。
整个AntDesign系统（未精简）重约100MB。
另一个限制是，AntDesign是专门为React项目而设计的。如果您使用的是其他JavaScript库，可能很难调整组件。
为什么人们喜欢Primer
Primer就像一块优秀的基础架构；它低调而简单，却能出色地完成工作。此外，知道GitHub背后的团队创建（并维护）了这个库，对项目的持久性和可靠性也是一大促进。
人们不喜欢Primer的地方
正如你可能已经猜到的，GitHub的设计美学并不适合每一个项目。
因此，人们主要抱怨Primer不像其他框架那样通用，对于不是为开发人员构建的项目或网站来说，Primer并不是理想的选择。此外，它的用户界面组件集也很有限，这在GitHub生态系统中是合理的。
Tachyons使用最少的CSS，非常适合快速创建主页、个人作品集或项目网站。
为什么人们喜欢Tachyons
人们喜欢Tachyons是因为它是一个快速、简单的框架。它重量轻、加载快，非常适合小型项目、个人网站和其他简单的使用案例。
它就像框架中的本田思域（基本款！）。
你知道你会得到什么。它很好用。而且值得信赖。
人们不喜欢Tachyons的地方
将Tachyons用于更复杂或视觉效果更复杂的项目需要大量的工作，这意味着它不会是那些只想制作一两个简单的网格页面的人的首选。
雅虎！
为什么人们喜欢Pure
PureCSS是最受欢迎的自定义CSS或其他框架的附加组件。它超轻量级，提供了许多有用的组件，可以轻松连接到现有系统。
这使得在现有堆栈中添加网格、表单、按钮、表格等功能变得非常简单。
人们不喜欢Pure的地方
Pure最适合作为插件而非独立框架使用。它不像其他解决方案那样有一个全面的库，也不提供主题或其他功能，因此只需快速编辑几下就能轻松定制项目的外观和感觉。
它使用了更少的JavaScript，并且可以在更广泛的设备和浏览器上使用。
通过访问GoogleWallet、GoogleforWork、Google开发者网站等网站，你可以看到MaterialDesignLite(MDL)的全貌。
为什么人们喜欢MDL
MDL为应用程序、表单等提供了功能超强的组件集。
由于它是根据MaterialDesign原则构建的，因此可用性和可访问性在设计和组件中都处于前沿和中心位置。
人们不喜欢MDL的地方
在现阶段，MDL在技术上已经折旧，因此系统不会获得任何更新或支持。
除此以外，整个美学设计给人的感觉有点局限。无论好坏，它给人的感觉很像是为谷歌产品打造的。
为什么人们喜欢Spectre
人们不喜欢Spectre的地方
如果你正在寻找一个拥有高级主题选项、繁荣社区和大量文档的庞大框架，那么它可能并不适合你。
Spectre则更低调一些。它是一款能够胜任工作的工具，但其受欢迎程度和采用率远不及Foundation或Bootstrap。
它是极简设计的终极选择，也是快速、直接的项目启动解决方案。
人们为何喜爱Milligram
Milligram可能是最轻、最简单的CSS框架，你可以用它来构建一个开箱即用的项目。它拥有许多其他框架最重要的功能，但占用空间却小得惊人。
它的惯例和类也让它非常容易上手。
人们不喜欢Milligram的地方
Milligram与榜单上其他知名度较低的系统一样，也存在一些缺点。整体知名度较低意味着社区支持较少。即便如此，Milligram的文档与更大型的框架不相上下，而且其简洁性可能会减少对额外帮助的需求。
为什么人们喜欢Water
Water是快速CSS解决方案、样式模板或简单模型的绝佳选择。
它的功能与包装盒上写的一样，是一款超快、省事的解决方案。
人们不喜欢Water的原因
对于任何复杂的网站或应用程序项目来说，Water都是行不通的。它没有网格，缺少许多大型项目所需的组件，最终以牺牲定制性或可扩展性为代价，将简洁性放在了首位（达到了极致）。
为什么人们喜欢Vanilla
虽然Vanilla没有Bootstrap等大型框架那么受欢迎，但它拥有企业级产品所需的支持、资源、文档，甚至是支持。
在可访问性方面有非常详细的分析，在与不同浏览器（具体到版本）和屏幕的兼容性方面也有细致入微的说明。
组件和样式也是简单而通用的。
人们不喜欢Vanilla的地方
和往常一样，这里没有对错之分，但有一些关键问题可以帮助你缩小选择范围。
了解您正在构建的项目类型是最好的开端。如果你正在为一个小项目或个人使用创建一个简单的网站，那么可以选择像Water或Milligram这样轻量级的简单系统。
但如果你需要更强大的系统，你可以选择Foundation或Bootstrap。
接下来，考虑系统的复杂性与您或您团队的能力之间的关系。你是研究新CSS框架的专家吗？或者这是你第一次使用非自制的东西？
了解如何使用CSS框架本身就需要一些学习。如果你从未使用过框架，最好选择一个简单的入门选项。然后，一旦你掌握了元的窍门，就可以深入学习更复杂的系统了。
您是否需要严格遵循现有的品牌或设计准则？
那么你需要选择一个内置主题和定制功能的选项，以便轻松匹配必要的风格和设计系统。
如果你的适应能力较强，你可以选择一个风格独特但缺乏灵活性的系统。
拥有一个使用该框架的社区可以让一切变得不同。查找社区论坛、Discord服务器或subreddits，看看有多少人在帮助其他用户，以及每个框架的社区有多活跃。
请务必考虑您所评估的框架的文件大小和性能。
网站性能受很多因素（如虚拟主机）的影响，而CSS也会对页面、文件大小和加载速度产生很大影响。
希望这份CSS框架列表能让你知道下一个项目该从哪里入手。
无论你是要创建下一个Facebook，还是要创建一个展示你的摇滚收藏的个人网站，我们都乐于帮助创意者和创业者构建一个美丽的互联网。