如何合理使用CSS框架？

现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站UI，我想大多数互联网用户都很难认得出来。所以也多亏了网页设计技术的创新，现在网站不仅仅是只能显示信息，它们同样也可以拥有有趣的动画、多样的布局和互动的元素。而其中，这些大部分都是由CSS来实现的。

所以CSS的出现为原本平平无奇的网页注入了活力。这也是网站的用户体验得到进一步进化的原因。这可能就是当今几乎所有的网站或多或少都在使用CSS的原因之一。

今年，一些CSS技术正在掀起一场新的技术革新，例如：Flexbox，尽管在Google Chrome上83%的页面加载使用了Flexbox，但另一个名为Grid的新竞争对手也正在慢慢流行起来。另外还有 CSS Writing-Mode、移动动画、单页网站、灵活字体和滚动捕捉等技术也可能产生一定影响。

但在本文里，不会讨论不同CSS技术之间的异同，主要是以介绍CSS框架为主。因为过去的几年里它们才开始流行起来，但已经有越来越多的开发人员已经开始接触使用它们了。

CSS框架是什么？

我们将CSS定义为一种设计语言，它为HTML文档的UI设计提供了帮助。通过CSS进行设计有很多优势，它可以与任何类型的XML一起使用，也包括XUL和SVG。CSS框架就像是一个现成的包，其中包含可以作为网站结构基础的文件。

使用框架有很多好处。以下是其中一些：

• 节省时间：这是最突出的优势之一。使用CSS框架，开发人员在构建应用或网站时无需从零开始。他们可以空出学习的时间专注到其他重要工作上，例如UI设计，移动端化以及解决特定浏览器兼容问题。

• 代码可重用：如果你的项目是一个拥有很多页面的大型项目，并且后续仍在持续更新，那么框架的使用将对你将很有用的。可以说拥有强大重用特性的框架，能明显缩短您项目的准备周期。

• 跨浏览器的问题：长久以来，处理各浏览器间的访问差异，是广大前端开发者最为头疼的事情。 但CSS框架能提前为您发现并解决各浏览器间的差异，以保证您可以在任何浏览器中无差异的运行。

• 标准结构确保一致性：前端框架通常由CSS，HTML和JavaScript文件组成，这些文件有助于确保所有页面中元素（如设计和表单等）的一致性。

优秀的CSS框架

Bootstrap

Bootstrap最初是Twitter Blueprint作为供团队内部使用的工具而创建的。但在它公开发布后，它受到了开发者广泛使用，使用率增长不断增长。

Bootstrap为警告窗、按钮、轮播、下拉菜单、表单等元素提供了设计模板。通过Bootstrap移动优先功能，可以为您轻松创建响应式布局，它能为您的应用在多个设备上实现一致的设计。

Skeleton

Skeleton以“简单支持响应式样板”的特点著称。因为该框架只有大约400行代码，它更适合于较小的项目或开发人员有着轻量化要求的情况。

对于那些刚刚开始使用前端框架的人来说，这也是一个不错的选择。但因为Skeleton缺乏了CSS设计模板、预处理器和