值得收藏的十种常用的CSS框架，快码住！

CSS框架是预先准备好的软件框架，允许使用层叠样式表语言更容易，更符合标准的进行网页设计。大多数这些框架包含至少一个栅格设计（grid）。

功能更强大的框架，还配备了更多的功能和附加的基于JavaScript的功能，但大多设计导向的和Unobtrusive JavaScript。本文从功能和充分的JavaScript框架区分来向大家介绍值得收藏的10 种常用CSS框架。

CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率。

可以说CSS框架是前端开发中不可或缺的元素。从最初只是定义文字颜色、内容排版，到定义所有的表现，CSS框架在逐渐发展的同时也日益壮大，被人们重视起来。我们开始意识到，从具象的表现中抽出抽象的模块来重复使用，是减少用户下载、方便团队及个人开发最重要的手段。

CSS作为目前的web前端开发的得力助手，其特征决定了其不可撼动的地位：

1.抽象出常用的css样式,高再可用性,高移植性

2.有固有的定义,详细的文档及开发特点

3.高兼容性,可以兼容流行的浏览器

4.以css为主,但不一定全部是css,可能有一些js(或者其他)脚本用于兼容浏览器

下面是为大家推荐的十种常用的CSS框架：

1、Bootstrap

作为前端开发最受欢迎的工具之一，Bootstrap在Web开发人员眼中早已成为了业界领先的前端框架。为了使Web开发人员能够构建出不同的用户界面组件，Bootstrap能够将CSS、Javascript和HTML代码组合到一起。其强大的功能毋容置疑。

2、 Foundation

ZURB于2011年9月设计出了Foundation。与其他CSS框架相比，Foundation不但拥有先进而复杂的界面，而且提供了响应式菜单，以及与各种设备和浏览器的兼容性。此外，你还可以使用CSS框架，来轻松地按需设置各种菜单样式。

3.Semantic UI

作为一名全栈开发人员，Jack Lukic使用自然语言原理创建了Semantic UI框架。凭借着jQuery和LESS功能，Semantic UI提供了光滑、平整且精细的外观，以及轻量级的用户体验。它的社区虽然相对较小，但是其成员既热情又忠诚。他们的目标是创建一种共享的UI语言，以赋予开发人员和设计人员同样的权利。目前，Semantic UI社区已经拥有约3000多个主题。

4. Materialize CSS

以Google为基础的Materialize CSS融合了JavaScript、CSS和HTML等各种组件。它不但具有一定的响应能力，而且存在较少的浏览器兼容性问题。如果您希望构建一个优雅的UI，那么Materialize就可以通过大量的自定义CSS，以及多种配色方案，是你独特的网站设计的必备良品。

5. PureCSS

由Yahoo开发的PureCSS，提供了一组体积小、且具有快速响应能力的CSS模块。它非常适合开发那些界面美观且功能不同的项目。PureCSS具有快速响应能力的内置设计，以及最小体积的标准化CSS，最重要的是它们都是免费的!

6.Bulma

作为一个基于Flexbox的开源框架，Bulma在全世界拥有超过20万名开发用户。它可以通过可视化的组件，让开发人员了解其运作的过程。该前端框架通过各种技术，为前端开发人员提供了一种内聚(cohesive)的界面。此外，由于它使用了响应式模板，因此我们可以更好地专注于网站的内容，而不是代码的编写。

7.UIKit

UIKit是一个模块化的轻量级前端CSS框架。它非常适合于快速开发那些功能强大的Web界面。凭借着CSS、HTML和JS组件的全面集合，它能够让前端框架既容易扩展，又方便被定制使用。UIKit是用于开发iOS应用最广泛的前端框架之一。它定义了诸如：按钮、标签、导航控制器和表格视图等核心组件。

8. Tachyons

与其他流行的前端框架不同，Tachyons旨在将CSS规则分解为小型的、可管理的、以及可复用的部件。Tachyons可以帮助开发人员创建出具有高度可读性、能够快速加载和响应的网站，而且无需使用大量CSS代码。

9.Tailwind

Tailwind是一款utility-first的框架，可以被用于快速地构建UI。作为一个utility-based的CSS库，它比那些语义和精益标记(lean markup)更注重实用性和速度。在创建网站时，您只需要确定项目的范围，而无需自行编写CSS。虽然Tailwind并不提供默认的主题，您也找不到任何内置的UI组件，但是您可以使用预设计的部件菜单，来构建目标网站。

10. Ant Design

由阿里巴巴开发的Ant Design是一种Javascript库类型的ReactJS组件库。通过将屏幕区域分为24列网格，它增加了用户对于可见区域的自定义能力。同时，它通过各种填充(filled)和轮廓(outlined)图标，来满足不同的应用程序的要求。

怎么样，也许你看完这十种CSS框架有一种眼花缭乱的感觉，不知道如何抉择。其实只有我们吃透了这十种CSS框架知识，又何尝不是一种机遇与挑战并存的好事呢？以后遇到前端开发时，我们能够把这十种框架对号入座，根据开发的需求找到最适合的CSS框架来进行前端开发。快动起你的小手，点击收藏这十种CSS框架吧。

声明：本文转载自蛙课网官方网站

想获取更多资讯、更多视频、面试题答案，还有各种资源+源码+工具

就关注“蛙课网校”公众号吧！

还有不定时福利，免费领取活动等你来参加哦~