小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
使用响应式CSS框架帮助我们减少大量的工作，我们可以不必去编写重复的CSS样式，提升开发效率。并且现在有着大量的开源的CSS框架可供我们使用。下面我列出的这些都是开源免费的。如果您还用有更好的选择欢迎在评论区告诉大家。
1. Bootstrap
大名鼎鼎的Bootstrap相信没有人没用过吧，Bootstrap是最被广泛的使用的CSS框架，它免费开源，至今仍有数百万网站在使用。
主要特性：
- 支持SASS变量和Mixins
- 支持响应式网格系统
- 有很多内置组件供使用
- 基于jQuery的强大插件
2. Tailwind
Tailwind是一个比较新的CSS框架，与其他框架不同，它并不提供内置的组件，而是提供很多基础的工具class，供我们去使用。
举个例子
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
Button
</button>
通过在button的class上写Tailwind提供的基础class，可以实现一个精美的按钮。
相比Bootstrap而言，它的灵活性很强，我们可以实现不同的按钮样式，不像Bootstrap，如果不修改默认样式，每个网站的按钮都差不多。令人一眼就看出是用了Bootstrap。
但其长长的class也让人头疼，有点像在直接写style，你喜欢这个框架吗？欢迎在评论区说出你的想法
<ul class="space-y-4">
<li>
<div class="w-64 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
</li>
<li>
<div class="w-56 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
</li>
<li>
<div class="w-48 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
</li>
</ul>
3. Bulma
Bulma经过Gzip后只有21kb，它采用移动端优先的思想构建，每个元素都针对垂直阅读进行了优化，它的网格系统完全由flexbox实现。
Bulma也是使用SASS构建的，我们可以引入我们项目中需要的部分即可。
4. UI Kit
ui kit是一个轻量化的响应式CSS框架，用来快速开发web应用。
ui kit简单易用，提供了网格系统、自定义图标、组件、动画等等，并且与Less和Sass兼容。
5. Semantic UI
Semantic UI和Bootstrap有很多的相似之处，其拥有语义化的HTML结构和class命名方式。同样提供基于jQuery的插件，用来实现动态的功能。
6. Spectre
最轻量的CSS框架，Gzip后只有10kb，提供基础的设计组件，基于flex布局，具有响应式和移动端优先的特点。
相比Bootstrap这个大而全的框架，对于简单的web应用也可以选择这种小巧、轻量的框架。
总结
所有的框架都有不同的优缺点，我们可以根据实际的项目需要选择适合的CSS框架，来帮助我们快速构建Web应用。
我的见识有限，列举的只是冰山一角，如果我错过了一些好用伟大的框架，请随时发表评论，让每个人都知道它。
觉得文章不错，欢迎关注公号（点击关注），每天更新一篇有用的内容。
