13个帮你提高开发效率的现代CSS框架

本文将向你详情一系列顶级CSS框架。有些人可能听说过，也可能对有些人是全新的。但它们都提供了各种有用的先进功能，可以改善你的工作流程。开始吧！

专注于 CSS 的框架

让我们先从少量专注于 CSS 的框架开始。你将找到所有类型的布局和UI元从来自己构建项目的基础。有些甚至可能包含少量 JavaScript 来帮你解决更复杂的功能。

Tailwind CSS

image.png

Tailwind与其余框架的区别在于它没有任何预构建的UI组件。相反，它更专注于程序本身，CSS类可以帮助你在构建网站方面领先一步。尺寸、颜色和定位等元素对它来说才是关键。

官网：https://tailwindcss.com

Bulma

image.png

Bulma是围绕CSS Flexbox构建的，是一个免费的开源框架。你会发现它有许多易于定制的UI元素。它是板块化的，这意味着你可以只导入所需的元素 —— 如列或者按钮。

官网：https://bulma.io/

Picnic CSS

image.png

Picnic CSS 是一个超轻量级的框架，压缩后小于10KB。它具备基于Flexbox的网格布局以及大量的UI元素，可以快速启动项目。你甚至可以找到一个简单的导航栏和模态窗口。

官网：https://picnicss.com/

Materialize

image.png

Google 的 Material Design 的粉丝一定喜欢 Materialise。该框架基于流行的设计语言，包括大量基于 CSS 和 JavaScript 的元素。它聚焦于微交互，以使客户界面更加友好。值得注意的是，Materialise 还支持自己设置主题。

官网：https://materializecss.com/

Pure.css

image.png

Pure.css在压缩后仅为3.8KB，以移动优先的理念为中心。它是板块化的，所以你只要导入要使用的元素包。你还可以下载和安装许多常用布局。

官网：https://purecss.io/

Base

image.png

Base 是一个板块化框架，正如它的名字所要说明的，其旨在为你的项目提供坚实的基础。它建立在 Normalize.css 之上，提供易于定制的基本样式。你在这里找不到任何太多的东西，但这恰恰就就是重点所在！

官网：https://getbase.org/

mini.css

image.png

mini.css 是一个在轻量级和功能丰富之间获得平衡的包。它的确达到了目标，压缩后大约10KB，同时拥有相当多的UI元素和布局。通过它提供的文档你可以深入理解这一切是如何运作的。

官网：https://minicss.org/

Concise CSS

image.png

Concise CSS 提供了一个基于实用程序的框架来使设计师“杜绝臃肿”，它可以让你快速入门。假如你需要UI元素的话可以通过单独的套件去增加它们。

官网：https://concisecss.com/

Mobi.css

image.png

Mobi.css 非常小（压缩后仅 2.6KB），主要针对移动客户。但是其内置主题和插件系统还有很大的增长空间。假如基本样式不能满足你的要求，可以在框架之上以板块化的方式进行构建。

官网：http://getmobicss.com/

Spectre.css

image.png

Spectre.css 被称为“轻量级、响应式、现代化”，是一个基于Flexbox的框架。你会发现少量基本的布局、UI和排版风格。此外还有许多功能组件（手风琴、弹出窗口、标签等）都是用纯CSS构建的。总的来说，它做到了很好的平衡性。

官网：https://picturepan2.github.io…

超越CSS范畴的框架

有些场景需要更强大的框架 —— 下面这些选择可以帮你完成这项工作。它们不仅提供了大量基于 CSS 的元素，而且还可以找到基于 HTML 和 JavaScript 的功能。从某种意义上来说，几乎就像是从完成了一半的模板开始构建你的网站，你可以通过自己设置来满足自己的需求。

Bootstrap

image.png

Bootstrap 是由 Twitter 创立的，由于它维护得很好，并提供了一个庞大的预建功能库，所以它几乎无处不在。尽管你可以使用默认设置，但 Bootstrap 也非常易于扩展。通过增加主题或者自己设置组件能够帮你进一步开发个性化的 UI。

官网：https://getbootstrap.com/

Foundation

image.png

Foundation 是板块化组件库，可以为你量身打造自己的项目。它有各种各样的选项 —— 从响应式布局到动画。 Foundation 也有自己的 JavaScript 插件API。最后，该框架附带了ARIA属性和角色，用于构建具备可访问性的站点。

官网：https://foundation.zurb.com/

Semantic UI

image.png

有时框架可以包含仅对其原始开发人员有意义的 CSS 类名。Semantic UI 希望通过使用自然语言来改变叙述。逻辑是很容易遵循的，应该可以加快开发速度。除语言之外，你还可以找到超过 3,000 个主题变量 —— 根据需要，你可以编辑或者删除所有这些变量。

官网：https://semantic-ui.com/

依赖框架更好地工作

完成你的项目需要做很多工作 —— 这就是框架存在的起因。它为我们解决了少量繁重的工作，并为之后的一切提供了基础。

最后，给大家推荐一个前台学习进阶内推交流群685910553（前台资料分享），不论你在地球哪个方位，
不论你参与工作几年都欢迎你的入驻！（群内会定期免费提供少量群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

假如您对这个文章有任何异议，那么请在文章评论处写上你的评论。

假如您觉得这个文章有意思，那么请分享并转发，或者者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。