盘点那些CSS框架，你都用过哪些？

使用响应式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应用。

我的见识有限，列举的只是冰山一角，如果我错过了一些好用伟大的框架，请随时发表评论，让每个人都知道它。

觉得文章不错，欢迎关注公号【前端工程师的自我修养】，每天更新一篇有用的内容。