“ NASA 已经将机器人登陆火星了，一些开发者还在为他们网站上 div 的中心对齐而苦恼”
这个笑话有很多道理。对于 UI/UX 设计师来说，制作一个在每个浏览器上都看起来不错的漂亮网站并不是一件容易的事。在为网站创建布局并使其美观时，开发人员必须考虑所有 Web 浏览器和移动视图。恐惧始终存在，如果设计会在某个愚蠢的浏览器上出现可怕的崩溃怎么办！感谢 CSS 框架让开发者的生活无限轻松。 CSS 框架消除了大部分痛苦，如今开发人员无法想象没有 CSS 框架的代码。这些框架不仅可以节省大量时间，还有助于以更好更快的方式构建漂亮的响应式 Web 应用程序。
这些框架提供了基本结构，其中包括网格、交互式 UI 模式、Web 排版、工具提示、按钮、表单元素、图标。可以使用现成的解决方案，这有助于快速构建网站。您不需要从头开始一切，您可以在您的项目中重用代码。
现在有一个问题，哪个框架最适合你？如果您不熟悉前端开发，那么选择框架可能会有点棘手。老实说，每个 CSS 框架都有一些优点和缺点，所以这取决于您的特定需求。在本文中，我们将讨论一些适用于行业中大多数开发人员的流行 CSS 框架。我们已经过滤掉了这些框架，同时记住了它们的优点和缺点。让我们来讨论这些框架。
1.引导
您可能肯定听说过这个框架，即使它是您的第一个工作。该框架是第一个推广“智能手机优先”理念的框架。 Bootstrap 是世界上最流行的 CSS 框架，由Twitter 于 2011年推出。 Bootstrap 在大规模构建响应式设计方面有很大帮助。当您包含相关的引导程序类时，它会自动调整不同屏幕尺寸的设计。它提供了大量的插件和主题构建器。该框架的当前版本是Bootstrap 4 ，其中包含更多功能，例如新配色方案、新修饰符、新实用程序类。版本 4 是用 SASS 构建的，这意味着 Bootstrap 现在支持 LESS 和 SASS。
优点：
- 快速原型制作
- 大型生态系统
- 大量组件
- LESS 和 SASS 支持
- 简单的文档和低学习曲线
- 由 Twitter 开发，因此对社区具有长期未来协会的信心。
2. 基金会
开发人员说，如果编程是一个宗教基金会，那么 Bootstrap 的人就会站在路障的对立面。 Foundation 是世界上另一个使用最广泛的优秀 CSS 框架。它被许多公司使用，例如Facebook、eBay、Mozilla、Adobe，甚至是 Disney 。该框架建立在像 bootstrap 一样的 Saas 上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易将它与模块捆绑器一起使用。它提供了 Fastclick.js 工具，可以在移动设备上更快地呈现。
优点：
- 创建响应式设计
- 强大的电子邮件框架
- 极高的灵活性
- 在线网络研讨会培训支持。
- 易于定制。
- 提供完整的模块化工具集，可让您解决几乎所有界面任务
- UI 组件等：高级成像系统、定价表组件、表单验证、垂直时间线布局、RTL 支持等等。
3.布尔玛
与其他 CSS 框架相比，Bulma 是市场上相对较新的框架，但 Bulma 设法在短时间内获得了用户的大量关注。这个免费的开源 CSS 框架基于Flexbox布局模型。最好的事情是它完全基于 CSS，它根本不需要 javascript 。它被全球超过 200,000 名开发人员使用。它响应迅速，重量轻，并且还遵循“移动优先”的方法。
优点：
- 所有 CSS 类名称都按逻辑命名，因此易于学习和记住语法。
- 纯 CSS，无 JavaScript
- 大型社区
- 模块化：使用 Saas 构建，您可以通过仅导入所需的必要功能来设计界面。
- 大量组件，如垂直对齐解决方案、布局以及媒体对象
4.纯
Pure 由Yahoo开发，是一个轻量级的响应式 CSS 框架。它使用 Normalize.css 构建，有助于使用网格和菜单创建响应式布局。它可以分解为不同的 CSS 模块，并且根据您的需要和偏好，您可以导入这些模块。因此，如果您只需要网格系统，则无需导入整个 CSS 并增加站点的加载时间。与 Bootstrap 不同，它不允许创建固定布局。
优点：
- 移动友好
- 纯粹基于CSS，所以很容易学习。
- 它提供了 5 点、2 点、24 点等的变化。因此在创建网格和列系统时使用它更加灵活。
5. 语义用户界面
该框架以其令人难以置信的主题效果以及简单优雅的设计而广为人知。语义 UI 是一个响应式框架，它使用人性化的 HTML，它允许您创建一个独特而漂亮的网站，而无需进行多次更改。它提供3000 多个主题变量和50 多个 UI 组件。它还支持第三方库，如 React、 Meteor、Ember、React 等。
优点：
- 友好的类名：它使用人类友好的 HTML，因此可以使用自然语言进行编码。
- 与 Bootstrap 4 和其他框架相比具有吸引力的布局。
- 只加载必要的组件，减少下载时间和文件大小
- 广泛的组件
6.顺风CSS
Tailwind CSS 是一个低级 CSS 框架，灵活且高度可定制。 Tailwind 是用 PostCSS 编写的，并用 JavaScript 配置。您将使用低级实用程序类来自定义您的设计，而不是使用预构建的组件，这使您可以完全控制站点的最终结果。从正面大小到间距，断点到阴影，颜色到边框大小都可以自定义。例如，您可以为按钮提供药丸、轮廓和 3D 外观。您可以个性化每个方面，并且可以以独特的风格创建设计，该设计看起来绝对不同于 Bootstrap 或 UI 套件等其他框架。
优点：
- 易于定制
- 实用程序类
- 带有响应式选项
7. 用户界面套件
这个强大的 CSS 框架以其极简主义的特点而闻名。 UI Kit 是一个轻量级的最小 CSS 框架，几乎包含了其他框架的所有功能。您可以使用最大的空白空间和许多 UI 组件（如 SVG 图标、进度条、图像制作器等）创建超级干净、优雅和漂亮的 Web 界面。有许多令人难以置信的组件、统一的样式和自定义选项可用。您可以使用 Nestable 等组件创建高级界面。它使用可靠且无冲突的命名约定。您还可以使用纯 HTML 设计复杂的基于 flexbox 的布局。
优点：
- 极简主义
- 大量有用的 UI 组件。
- 与 Less 和 Sass 兼容
- 包括 JavaScript
- 对任何设备的适应性
8. 实现 CSS
如果您喜欢使用材料设计，那么您绝对应该查看这个框架。它由谷歌于 2014年创建，对于那些想要设计网站或 Android 网络应用程序的人来说，这个框架是一个很好的解决方案。 Google 的很多产品都是在这个框架上实现的，比如 YouTube、Gmail、Google Drive 和 Google Docs。它附带了一些随时可用的组件和类，使您无需付出太多努力即可尽快完成工作。该框架使用由 Bootstrap 建立的 12 列基于网格的布局、响应式动画和过渡、填充以及深度效果（例如照明和阴影）。使用其预先构建的入门模板，您可以以最少的设置时间设计您的网站。
优点：
- 材料设计
- 引导网格
- 大量组件选择
- 轻松定制
- 与 Sass 兼容
9. 骷髅
顾名思义，Skeleton 是最简单、最小的响应式 CSS 框架。它仅包含400 行代码，但提供了大量可在您的项目中使用的选项。网格、排版、按钮、表单、列表、媒体查询、表格等功能可让您轻松创建复杂的网站。我们已经在 CSS 框架中提到过它，但是较少的代码行没有将自己定义为 CSS 框架、库甚至模块。它实际上是一个样板，适用于小型项目或已开始作为 UI/UX 开发人员的职业。它只附带有限数量的标准 HTML 元素，但这足以开始构建一个简单而优雅的网站。
优点：
- 移动友好
- 简单易学
10. 毫克
顾名思义，这是另一个轻量级 CSS 框架，旨在更快地创建网站。该框架的大小仅为2Kb，但它带有许多功能和 Web 开发工具来满足您的要求。它为开发人员提供了灵活性，并允许他们使用 CSS3 规范提供的所有功能。还可以使用几行自定义 CSS 来扩展它。
优点：
- 基于 Flexbox 网格
- 超级设计主题
我们已经提到了一些在开发人员中非常流行的 CSS 框架，但您也可以尝试使用其他一些 CSS 框架。其他一些流行的框架有Susy、Animate.css、Paper CSS、NES.css、Base、Tent CSS、Simple Grid、Spectre、Mustard UI、Picnic CSS、Mini.css、Gumby等等。