先来回顾一下前几章节，我们都说了哪些内容：
围绕着CSS Reset这个话题我们已将讲了3章节，从中了解到CSS Reset的作用，Normalize.css的优势，以及它是如何帮我修复跨浏览器的兼容性问题的；
这一章节内容会弱化CSS Reset的主题，不是因为这章节与CSS Reset无关了，而是因为我们要基于它去扩展更多的内容，来帮助我们解决实际开发中更多的问题。
现在回到我们这一章节的标题，将它做下补充：
《关于CSS Reset 那些事（四）之 基于CSS Reset 构架CSS基础库》
我上一章节的末尾抛出了几个问题：
1.假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义Normalize.css样式来满足自己的需求。
2.假设你要做一份文案策划的网页，包含很多文字排版时，此时Normalize.css也许并不完全适合你，因为它的默认字体设置和排版布局可能不能满足你的要求。
3.假设你要做一个企业类型的网站，并考虑跨浏览器兼容性，网站包含内容元素也很丰富，那么你可以选择使用Normalize.css来统一你的浏览器样式，但是它仅仅帮助我们解决了样式统一的问题是不够的，你是不是还要设计一套布局系统，来解决该网站的布局问题呢？
从以上几个问题可以看出，在构建大型网站的时候，我们可以把Normalize.css作为基础样式，然后根据不同的页面需求，进行添加样式覆盖它。
但是这只是我们的第一步，关于网页开发中更多的基础解决方案还有很多，比如刚刚说的布局系统，或许你还会用到很多常用的CSS问题解决方法，如浮动和清除浮动，自适应两端对其等等。
那么下一节，我们就来分析一下CSS 基础库到底包含什么内容？
我认为基础样式库 始终 能帮我们解决开发时遇到的一些基础性问题：
基础库初衷和未来方向：
normal.css [基于Normalize.css自定义模块，继承其优势，改善文字与部分细节]html5.css [html5样式修复，默认会导入normal.css，可按需引用]form.css [表单的一些基础样式，可按需引用] grid.css [响应式网格系统，优化命名与精简代码，可按需引用] utils.css [HTML中直接使用的工具类，可按需引用] iconfont.css [一套复用率极高的字体图标，可按需引用] animate.css [常用的动画效果组合，可按需引用] print.css [优化默认的打印样式，可按需使用]
我们按照需求，初步划分了基础样式库的结构，起初html5.css的内容是考虑直接放在normal.css里面的，但是为了考虑一部分人在页面中使用了像html5shiv的解决方案来兼容低版本浏览器，所以这里就体现出了分模块的便捷性，拆分为一个独立的css文件，需要时再进行使用，不过这里默认使用@import "html5.css"进行导入只是为了预览调试，请在实际使用中将代码拷贝至normal.css，或者使用yuicompressor进行压缩合并后再使用。
下一节我们来细化基础样式库的内容，看一看它都需要帮我们做哪一些事情。
Normalize.css不仅统一了样式，还保留元素的可辨识性，这是我们应该继承和发扬的优点，normal.css也会参考借鉴Normalize.css所有优势，不过为了让其更简洁，让开发者更容易上手，我选择对它进行瘦身，比如移除一些不会用到的元素标签hgroup，将一些元素进行分模块管理，比如html5.css，form.css等，方便按需求灵活引用。
normal.css 包含内容以及调整部分
html5.css主要是用于解决html5新元素在旧浏览器中的不识别，并且修复一些元素存在的隐性问题。
但是为什么不把html5.css这部分内容直接放入normal.css，而是考虑将其进行分模块管理呢？ 是为了考虑一部分人在页面中已经使用了像html5shiv的解决方案来兼容低版本浏览器，所以这里就体现出了分模块的灵活性，拆分为一个独立的css文件，需要时再进行使用。
不过这里默认使用@import "html5.css"进行导入只是为了预览调试，请在实际使用中将代码拷贝合并至normal.css，或者使用yuicompressor，Grunt进行压缩合并后再使用。
html5.css 包含内容以及调整部分
form.css修复表单元素在不同浏览器下的默认样式，尤其是IE低浏览器版本下的一些怪异问题；并且还修复了一些表单显示状态，致力于提升用户体验；
button按钮在网页中是最常用的基础元件，但是不同浏览器下按钮的默认样式千奇百怪，而且表现形式过于单一，所以考虑在form.css里内置了一套按钮组件，提供几种表现场景，并且可以和下面要介绍的iconfont.css搭配使用。
form.css 包含内容以及调整部分
ui-btn 按钮组件包含的内容
使用示例
<button type="button" class="ui-btn">默认</button>
借鉴了Bootstrap的一套响应式流式栅格布局系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
对栅格系统的样式命名进行重新组织，简化和移除工具代码，只保留核心布局样式。
简洁即是高效率。
grid.css 包含内容以
使用示例
<div class="ui-grid-fluid"><div class="ui-row"> <div class="ui-col-8">.ui-col-8</div> <div class="ui-col-4">.ui-col-8</div> </div></div>
提供最常用的功能类class，命名使用fn-前缀来进行区别表示，如果在项目中能够灵活复用这些类，那将大大提升开发效率。
utils.css 包含内容以及调整部分
使用示例
<!-- 文字溢出显示省略号 --><div class="fn-text-ellipsis">文字那是相当的长</div>
iconfont都已经很熟悉了，是一种把图标放入自定义字体中，然后使用字体图标来替代普通图标的技术，使用起来方便灵活。
iconfont.css 包含内容以及调整部分
使用示例
<button class="ui-btn"><b class="iconfont">~</b>提交</button>
CSS3的动画让网页变的更加有活力，所以这里引入一套CSS3动画库，可以通过简单的引用类名的方式在你的项目中实现最常见的动画效果。
animate.css 包含内容以及调整部分
使用示例
<div class="animated fadeIn"> 淡入效果</div>
可以优化打印出的网页更适合浏览，并且加快打印速度，节省打印机耗材。
print.css 包含内容以及调整部分
通过对以往开发中遇到问题的总结，以及对CSS基础库的需求进一步细化，当我们明确的知道需要什么了以后，从参考业内最优秀的CSS框架，到提取出能够解决我们实际问题的代码；从以往的开发经验中整理出最高效复用的方案，再到一次次的“取之精华去之糟粕”； 最终这篇文章有了产出：
项目名称：Koala - 更简洁高效的基础样式库
项目版本：alpha（内部测试与学习参考使用）
项目地址：https://github.com/Alsiso/Koala
项目交流：New issue
欢迎大家Fork代码，提出问题与意见，一起进行学习交流 ~
最后再说明一点：当前版本并不是正式生产版，所以还不能完全应用到项目中，目前仅供学习参考使用，部分的细节完善和优化还在进行中，如果你有意见和问题，欢迎随时联系：chyi722到163.com
CSS基础样式库只是前端解决方案中最小的一个分支，其实我们还可以完善更多的内容来帮助解决前端开发中所有的问题，就犹如下面这个表格。
| 分层 | 结构层+表示层 | 行为层 |
| html+css | js | |
| 基础库 | normal/grid/utils/scss扩展/ | jquery/base/seajs/ |
| 组件 | 元件/静态组件 | ui组件/业务组件 |
| 模块 | html/css/js(基础库+组件) | |
后续会持续跟进完善内容，致力于让前端开发变得更简单，高效，稳定，也让我们的工作生活变的像Koala一样，每天拥有18个小时的睡眠时间~
至此《关于CSS Reset 那些事》的系列文章已经完结了，感谢大家关注Alsiso，后续也会以这种方式来分享学习成果与方法。
