共计 5282 个字符，预计需要花费 14 分钟才能阅读完成。
提名举荐！15 个 2019 年最佳 CSS 框架
Trista
2019-11-08
开发网站或 web 利用时，网页开发工程师往往都须要编写 CSS，如果每个我的项目都是从 0 开始，将会破费大量的工夫和精力，并且还会解决很多重复性工作。
慢慢地，工程师们意识到，能够拿出形象的模块来重复使用，以此来晋升开发速度。于是乎，CSS 框架便应运而生，并且失去了越来越多的工程师的青眼。
本文精选了 15 个 2019 年最佳 CSS 框架，如果你想要更快更简略地开发网站或 web 程序，肯定不要错过哦~
HOW | CSS 框架如何帮忙前端开发工程师？
在正式开始之前，无妨先理解一下 CSS 框架。
简略点讲，CSS 框架就是一个事后筹备好的网站根底框架。简直每个 CSS 框架都具备一些根本构造，比方，栅格设计、交互式 UI 设计模式、Web 排版、工具提醒、按钮、图标，以及表单元素等等。这些事后筹备好的框架能够让工程师们在一个绝对成熟的模板上进行定制和延长，而不是从 0 开始开发。
最棒的一点是，只管开发的我的项目不尽相同，但很多 CSS 框架仍旧能够反复利用，这将在更大程度上节省时间。
WHY | 为什么须要应用 CSS 框架？
诚然，CSS 具备诸多长处，但它也并非完满，很多工程师也会因而产生疑难：应用 CSS 框架真的有必要吗？
在我来看，应用 CSS 框架的确十分高效，如果非要下一个定论，权且能够用利远大于弊这个说法：
其一，CSS 框架能够帮忙工程师更快地开发网站
在开发网站或者 web 利用时，工夫节点十分要害，应用 CSS 框架能够极大地节约工夫老本。并且 CSS 框架简直都具备高度自定义性能，不会对设计还原造成重大影响。
此外，对于高级前端开发，CSS 框架的作用会更加显著。应用一个现成的网站根底框架和与之配套的工具与小部件，能够帮忙开发比较顺利地开发我的项目，即便他们的开发程度不够优良也不会有很大影响。
其二，CSS 框架能够疾速构建线框或原型我的项目
无论是网站设计还是产品设计，原型都至关重要。我的项目原型能够帮忙团队疾速验证和测试项目正确性。如果应用 CSS 框架，就能够更快地做出网站原型以尽早测试。
补充一点：对于产品经理而言，也能够应用疾速原型工具画原型。
WHAT | 2019 年最佳的 CSS 框架有哪些?
以下是咱们精心筛选的 15 个 CSS 框架，每个框架的特色和利弊都有尽力说到，心愿能够帮忙你找到目前最合乎你须要的一款。
1. Bootstrap
Bootstrap 是目前应用最宽泛的 CSS 框架，它是 Twitter 推出的一个用于前端开发的开源工具包，以后最风行的版本是 2018 年公布的 Bootstrap 4。相比 Bootstrap 3，Bootstrap 4 减少了很多特色和性能，例如新的配色计划，新的修改器以及新的实用程序分类等等。此外，Bootstrap 4 是应用 SASS 构建的，也就是说，Bootstrap 当初同时实用于 LESS 和 SASS 了。
Bootstrap 更多功能解析：
1）响应式设计
Bootstrap 的响应式设计方案是基于其栅格设计零碎，操作不便又简略，开发人员能够疾速创立一个基于 Flexbox 的网站布局，并且兼容所有浏览器。此外，Bootstrap 也是第一个引入挪动优先设计的 CSS 框架。
2）海量资源
Bootstrap 有十分丰盛的前端框架库，外面有网站布局式样，网站模板、Bootstrap 主题模板、治理面板以及大量的 UI 组件，比方按钮、表单、卡片、进度条等等。这些事后构建的组件都能够间接应用。
3）简略易学
入门 Bootstrap 比较简单，当初有很多设计师在学前端的时候，都会学习 Bootstrap 框架。
2. Foundation
相比其余 CSS 框架，Foundation 显得绝对业余，性能更加全面，因而也具备肯定的学习难度。作为一个更高级，更简单的框架，Foundation 具备超强的可读性、灵活性和可自定义性。这些特色也让它成为创立响应式网站和应用程序的首选框架之一，很多大型网站，比方 Facebook、Ebay、Mozilla、Disney，Adobe 等都应用了该框架。
Foundation 更多功能和特色解析：
1）弱小的电子邮件框架
设计合作用摹客，100 人团队收费应用
立刻开启
除了网站和 web 应用程序之外，Foundation 还能够创立外观精美的响应式 HTML 电子邮件，并且适配任何设施。
2）在线培训服务反对
Foundation 的学习难度较大，因而 Zurb（Foundation 的开发团队）开设了在线培训课程和以及业余咨询服务。
3）更易自定义
Foundation 比 Boostrap 更加灵便，Bootstrap 做进去的货色往往会十分类似，但 Foundation 能够做十分高度的自定义设计，只有专业技能足够，前端开发人员能够齐全掌控 UI 界面。
3. Pure
Pure 是 Yahoo 在 2014 年创立的一个轻量的响应式 CSS 框架。它基于 Normalize.css 构建，开发人员能够应用其栅格设计和菜单创立高度响应式的页面布局。
和 Bootstrap 不同，Pure 在默认状况下是响应式的，因而无奈禁用响应式选项。此外，如其名所示，Pure 是一个纯 CSS 框架，不蕴含任何 JavaScript 组件，体量也十分轻小，整个模块压缩后只有 3.8KB。
4. Bulma
Bulma 是一个基于 Flexbox 布局模型的收费开源我的项目。该 CSS 框架也是轻量级、响应式的，并且具备挪动优先的理念。对开发人员而言，Bulma 和 Bootstrap 以及 Foundation 能够一起并列为三大最受欢迎的 CSS 框架，目前寰球曾经有超过 15 万名开发人员在应用 Bulma。
Bulma 之所以广受欢迎的起因还有其高度可读的命名规定，这对于老手开发人员来讲，会大大降低学习老本。还有一个比拟有意思的点，Bulma 在 Github 上能够说是明星选手般的存在，人气超高。
5. Semantic UI
Semantic UI 是一个用户友好度爆表的响应式前端框架，具备 3000 多个主题变量和 50 多个 UI 组件，能够疾速搭建丑陋的网页。Semantic UI 还集成了许多第三方资源库，包含 React，Angular，Meteor，Ember 等等，给开发人员带来了更多便捷。
Semantic UI 官网始终鼎力宣传他们的最大亮点——“human-friendly HTML”，也就是说，开发人员能够应用通用语言来直观展现分类和命名，因而简直没有任何门槛就能够读懂代码。
此外，相比 Boostrap 的很多相似的 UI 界面或 Foundation 须要自定义操作的 UI 界面，Semantic UI 能够默认创立更加好看的界面和布局。
6. UI kit
UI kit 是一个轻量级的 CSS 和网页 UI 设计框架，它最大的特色是性能全面性不输其余 CSS 框架，但奉行极简主义的它体量却更笨重，简直能够用麻雀虽小，五脏俱全来形容了。
UI kit 具备超多的 SVG 图标、字体以及组件，加之其弱小的响应式设计，对立的 UI 款式和灵便的自定义选项等性能，开发人员能够疾速创立简洁、模块化的 web 界面。
此外，开发人员来能够在该框架中应用 HTML 创立更高级的 flexbox 布局。
7. Materialize CSS
Materialize CSS 是 Google 在 2014 年开发的响应式前端框架，它是基于 Google 的 Material Design 创立的，所以尤其适宜网站或 Android 平台的我的项目应用。
目前来看，两类人应用该框架最多，一种是酷爱 Google Material Design 的开发人员和设计师，所谓爱屋及乌，加之 Materialise CSS 自身的确也比拟优良，因而很多 Material Design 爱好者自然而然就用它了。
第二种是相熟 Boostrap 的开发人员，因为 Materialize CSS 也是应用了 Bootstrap 的 12 列栅格设计模式，因而应用起 Materialize CSS 来也会比拟相熟，能够疾速创立响应式页面布局。
如果你是其中之一，无妨试试 Materialise CSS。
8. Milligram
Milligram 能够说是最轻小的 CSS 框架之一，压缩后到最小时仅 2KB，因而只能提供最小的款式设置。Milligram 尽管十分轻小，但性能仍旧不差，它具备一整套 web 开发工具，并且充分利用了 CSS3 标准中的各种原理来帮忙开发人员疾速开发。
9. Skeleton
Skeleton 是一个响应十分疾速的 CSS 框架。和 Milligram 一样，它的体量也十分轻小，仅蕴含 400 行源代码，但它具备的栅格设计、版式、按钮、表单、列表、表格等性能，仍旧能够帮忙开发人员疾速创立我的项目。
如果你正在进行某个比拟轻量级的我的项目，或者不须要一些大型框架的诸多实用程序时，应用 Skeleton 或者是一个不错的抉择。
10. Tailwind CSS
Tailwind CSS 是一个高度可定制的 CSS 框架，在这一点上，Tailwind CSS 简直完胜了其余所有的 CSS 框架。
那么，Tailwind 是如何做到的呢？
首先，Tailwind 框架是应用 PostCSS 编写的，并且应用了 JavaScript 进行配置。这样，开发人员能够齐全自主把握网页 UI 格调，包含色彩、边框大小、字重，间距、暗影等等。
举个例子，用 Tailwind 创立按钮，它们的外观如下：
- Pill 按钮
- Outline
- 3D 成果
其次，Tailwind 没有大量事后设置好款式的 UI 组件，而是专一于实用程序，因而开发人员能够更加自主的创立界面 UI。但学习实用程序并不容易，如果你对 Atomic CSS 也无所不知，学习难度就更高了。
11. Spectre
Spectre.css 是一个轻量级，响应式和现代化的 CSS 框架，它基于 Flexbox 布局创立，具备比拟优雅的设计外观、版式以及组件。并且 Spectre 的所有组件也是齐全应用 CSS 创立的，因而不须要应用任何 JavaScript 语言就能够应用。
12. Base
Base 是一个响应式 CSS 框架，它也是十分轻量级的，但性能仍旧弱小，具备多个独立的模板，不便选取和应用。此外，它也具备挪动优先设计理念，并且兼容支流浏览器，包含 IE 10+。
13. Picnic CSS
Picnic 也是一个轻量级 CSS 框架，压缩后的大小不到 10kb。该框架最大的特点就是具备多个交互式组件，包含栅格、表单、选项卡、工具提醒等等，能够帮忙开发人员疾速创立响应式网站和 web 应用程序。
14. Mustard UI
Mustard UI 能够说是一款入门级别的 CSS 框架。如果你是第一次理解 CSS 框架，能够从它的模块开始学习，零门槛，简直是即学即用。它的性能无限，但仅作为入门跳板倒也是十分不错的。
15. Dead Simple Grid
Dead Simple Grid 是一个十分有用的工具，体量也不大，是一个开源我的项目，仅蕴含 250 个字节的 CSS 代码和 2 个分类。
严格意义上甚至能够不把它看做一个残缺的 CSS 框架，但它能够为前端开发工程提供十分好用十分弱小的栅格零碎，这也是必须要举荐它的起因。
更多响应式 CSS 框架举荐
1. Susy
Susy 是一个基于 Sass 的轻量级栅格布局框架，能够帮忙开发人员简化响应式栅格布局开发流程。应用 Susy 时，开发人员还能够应用 float，flexbox，table 等其余 CSS 技术。
2. Animate.css
Animate.css 能够帮忙开发人员疾速增加 CSS 动画，包含过渡、变换、弹跳、滚动等等。
3. Paper CSS
Paper CSS 是一个应用 LESS 构建的 CSS 框架。
4. NES.css
NES.css 是一个具备 NES 款式的 CSS 框架，它只提供组件，没有布局。
5. Tent CSS
Tent CSS 是一个简略的 CSS 框架，具备构建网站的根底构造。
6. Simplegrid
Simple Grid 是一个轻量级 CSS 网格，具备 12 列栅格设计款式，能够疾速构建响应式网站。
对于 CSS 框架的相干问题
1. Bootstrap 是一个好的框架（CSS 框架）吗？
当然咯。Bootstrap 是本文第一个介绍的 CSS 框架，也是目前最罕用的 CSS 框架。如果你对 Boostrap 感兴趣，倡议你应用最新的 Bootstrap 4。
2. Bootstrap 比 CSS 好用吗？
两者其实实质不太一样，CSS 是一种计算机语言，而 Bootstrap 是一种前端开发框架，并且 Bootstrap 是基于 HTM, CSS 和 JavaScript 创立的。他们两者在应用中各自都有优缺点，这两者也都是开发工程师都要把握的。
3. Flexbox 是框架吗？
Flexbox 不是框架。Flexbox（Flexible Box Layout Module）是 CSS3 中增加的一个新性能，实质上是一种布局模式，能够帮忙开发工程师疾速创立网页布局。
4. HTML 是框架吗？
HTML 不是框架。HTML（Hypertext Marked Language）中文为超文本标记语言，是一种标记语言。开发工程师能够把界面信息按某种规定写成 HTML 文件，并且让浏览器辨认，成为咱们看到的网页。
对于 CSS 框架就临时介绍到这里，如果你有其余好的 CSS 框架开源我的项目，欢送分享哦~