First, let’s review the previous chapters and what we have said:
We have talked about the topic of CSS Reset in 3 chapters, from which we learned about the role of CSS Reset, the advantages of Normalize.css, and How it helped me fix cross-browser compatibility issues;
The content of this chapter will weaken the theme of CSS Reset, not because this chapter has nothing to do with CSS Reset, but because we are going to be based on it To expand more content to help us solve more problems in actual development.
Now go back to the title of our chapter and add the following:
"Things About CSS Reset (4) Based on CSS Reset Architecting CSS basic library》
I raised a few questions at the end of the previous chapter:
1. Suppose you want to make a game single page, and there is no form content on the page, then you need to remove some redundant code and start customizing the Normalize.css style to meet your own needs.
2. Suppose you want to make a copywriting planning web page that contains a lot of text layout. Normalize.css may not be completely suitable for you at this time, because its default font settings and The layout may not meet your requirements.
3. Suppose you want to make a business-type website and consider cross-browser compatibility. The website contains rich content elements, then you can choose to use Normalize.css to unify it. Your browser style, but it is not enough to just help us solve the problem of unified styles. Do you also need to design a layout system to solve the layout problem of the website?
As can be seen from the above questions, when building a large website, we can use Normalize.css as the basic style, and then add styles to cover it according to different page requirements.
But this is just our first step. There are many more basic solutions in web development, such as the layout system just mentioned. Maybe you will also use many common CSS problem solving methods. Such as float and clear float, adaptive alignment at both ends, etc.
So in the next section, let’s analyze what the CSS basic library contains?
I think the basic style library always can help us solve some basic problems encountered during development:
Original intention and future direction of the basic library:
normal.css [基于Normalize.css自定义模块，继承其优势，改善文字与部分细节]html5.css [html5样式修复，默认会导入normal.css，可按需引用]form.css [表单的一些基础样式，可按需引用] grid.css [响应式网格系统，优化命名与精简代码，可按需引用] utils.css [HTML中直接使用的工具类，可按需引用] iconfont.css [一套复用率极高的字体图标，可按需引用] animate.css [常用的动画效果组合，可按需引用] print.css [优化默认的打印样式，可按需使用]
We will initially The structure of the basic style library is divided. At first, the content of html5.css was considered to be placed directly in normal.css. However, in order to consider that some people used solutions like html5shiv in the page to be compatible with lower version browsers, so here is It reflects the convenience of splitting into modules. It is split into an independent css file and can be used when needed. However, @import "html5.css" is used by default here to import just for preview and debugging. Please copy the code in actual use. to normal.css, or use yuicompressor to compress and merge before use.
In the next section, we will refine the content of the basic style library and see what it needs to do for us.
Normalize.css not only unifies the style, but also retains the legibility of the elements. This is what we should inherit and carry forward the advantages of normal.css will also refer to all the advantages of Normalize.css. However, in order to make it more concise and easier for developers to use, I chose to slim it down, such as removing some element tags that will not be used. hgroup manages some elements into modules, such as html5.css, form.css, etc., to facilitate flexible reference according to needs.
normal.css contains content and adjustment parts
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，后续也会以这种方式来分享学习成果与方法。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
