Things About CSS Reset (Part 4) Building CSS Basic Library_html/css_WEB-ITnose

Foreword

First, let’s review the previous chapters and what we have said:

CSS Reset History and Introduction to Normalize.css

Normalize. css source code interpretation

Normalize-zh.css is released

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》

Concept of CSS basic library

Why do we need to build a 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?

What is a basic library

I think the basic style library always can help us solve some basic problems encountered during development:

• If the browser styles are not uniform, you need to reset the style;
• If the basic form style is too ugly and difficult to operate, you need to optimize its style;
• If the layout style needs to be written repeatedly, a stable set is needed Reuse solutions;
• For example, the floating and alignment operations of some styles need to be unified and managed for multiple reuse;
• For example, common CSS animation effects need to be unified and managed to facilitate reuse. Use;
• For example, some commonly used icons require a set of reusable font icons;
• If printing is required, provide a more reasonable printing style

Original intention and future direction of the basic library:

• Minimize development difficulty
• Provide a simple and efficient development experience
• Tend towards modular style construction specifications
• As the core foundation of the future UI component library
• Always standing on the shoulders of giants

The structure 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.

CSS basic library content

Style reset scheme normal.css

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

• 字体约定62.5%，方便单位转换
• 统一元素的内外边距
• 设置全局字体，修复表单元素不继承父级font的问题
• 添加链接基本样式
• 移除列表元素的默认标识
• 移除元素默认边框
• 移除链接默认的下划线
• 移除单元格间距让其边重合
• 修复th不继承text-align，默认左对齐
• 重置标题，采用自定义
• 把所有斜体标签默认扶正
• 统一引用标记
• 统一上标和下标

HTML5元素 html5.css

html5.css主要是用于解决html5新元素在旧浏览器中的不识别，并且修复一些元素存在的隐性问题。

但是为什么不把html5.css这部分内容直接放入normal.css，而是考虑将其进行分模块管理呢？ 是为了考虑一部分人在页面中已经使用了像html5shiv的解决方案来兼容低版本浏览器，所以这里就体现出了分模块的灵活性，拆分为一个独立的css文件，需要时再进行使用。

不过这里默认使用@import "html5.css"进行导入只是为了预览调试，请在实际使用中将代码拷贝合并至normal.css，或者使用yuicompressor，Grunt进行压缩合并后再使用。

html5.css 包含内容以及调整部分

• 修复HTML5新元素不能正确显示的问题
• 修复progress元素的对其问题
• 修复没有controls属性的audio显示出来
• 修复hidden属性不起作用的问题
• 修复svg元素overflow不正常的问题
• 统一mark标签的样式
• 修复拖动元素添加拖动的光标

表单元素 form.css

form.css修复表单元素在不同浏览器下的默认样式，尤其是IE低浏览器版本下的一些怪异问题；并且还修复了一些表单显示状态，致力于提升用户体验；

button按钮在网页中是最常用的基础元件，但是不同浏览器下按钮的默认样式千奇百怪，而且表现形式过于单一，所以考虑在form.css里内置了一套按钮组件，提供几种表现场景，并且可以和下面要介绍的iconfont.css搭配使用。

form.css 包含内容以及调整部分

• 统一fieldset元素的显示样式
• 修复'legend'元素的若干问题
• 修复表单元素字体与字号不继承的问题
• 统一表单元素的垂直对其方式
• 统一表单元素的overflow属性为visible
• 重置按钮禁用时光标样式
• 修复checkbox,radio的属性box-sizing: border-box;
• 统一button,input内边距和内边框
• 统一select的样式
• 修复textarea只能为纵向拉伸

ui-btn 按钮组件包含的内容

• 初始化默认按钮样式，增加不同状态下的效果
• 提供多种场景按钮，如主要，警告与错误
• 提供可定制的大小按钮，如较小，更小，一般，较大，更大
• 提供组合式按钮
• 支持iconfont.css，搭配图标按钮使用

使用示例

<button type="button" class="ui-btn">默认</button>

栅格系统 grid.css

借鉴了Bootstrap的一套响应式流式栅格布局系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

对栅格系统的样式命名进行重新组织，简化和移除工具代码，只保留核心布局样式。
简洁即是高效率。

grid.css 包含内容以

• .ui-grid-container(固定宽度)和.ui-grid-fluid(100%宽度)用于包裹.ui-row
• .ui-grid-container(固定宽度)通过媒体查询来实现响应式宽度
• .ui-row用于包裹一组.ui-col-1-.ui-col-12列
• xs,sm,lg通过媒体查询来实现响应式
• .ui-col-xs-* 超小屏幕 手机 (<768px)
• .ui-col-sm-* 小屏幕 平板 (≥768px)
• .ui-col-* (默认)中等屏幕 桌面显示器 (≥992px)
• .ui-col-lg-* 大屏幕 大桌面显示器 (≥1200px)
• 支持列嵌套，必须包裹在.ui-row行中
• 简化代码，不支持列偏移，列排序

使用示例

<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>

辅助工具 utils.css

提供最常用的功能类class，命名使用fn-前缀来进行区别表示，如果在项目中能够灵活复用这些类，那将大大提升开发效率。

utils.css 包含内容以及调整部分

• 浮动元素与清楚浮动元素
• 垂直与水平滚动
• 元素显示类型
• 元素与文本隐藏
• 文本不换行
• 文本强制换行
• 文本溢出显示省略号
• 文本左右对齐
• 文本垂直对齐
• 常用符号(关闭，箭头，下三角等)
• 自适应两端对齐
• 未知高度垂直居中
• 列表平铺

使用示例

<!-- 文字溢出显示省略号 --><div class="fn-text-ellipsis">文字那是相当的长</div>

字体图标 iconfont.css

iconfont都已经很熟悉了，是一种把图标放入自定义字体中，然后使用字体图标来替代普通图标的技术，使用起来方便灵活。

iconfont.css 包含内容以及调整部分

• 提供网页中66个最常用的字体图标
• 可搭配form.css按钮组件使用

使用示例

<button class="ui-btn"><b class="iconfont">&#126;</b>提交</button>

动画库 animate.css

CSS3的动画让网页变的更加有活力，所以这里引入一套CSS3动画库，可以通过简单的引用类名的方式在你的项目中实现最常见的动画效果。

animate.css 包含内容以及调整部分

• 弹跳
• 闪烁
• 摇动
• 淡入 (up,down,left,righ)
• 淡出
• 滑入 (up,down,left,righ)
• 滑出

使用示例

<div class="animated fadeIn">    淡入效果</div>

打印 print.css

可以优化打印出的网页更适合浏览，并且加快打印速度，节省打印机耗材。

print.css 包含内容以及调整部分

• 修复打印时的背景和文字颜色
• 删除所有的阴影效果
• 标注超链接，并显示URL链接

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，后续也会以这种方式来分享学习成果与方法。

• 关于CSS Reset 那些事（一）之 历史演变与Normalize.css
• 关于CSS Reset 那些事（二）之 Normalize.css 源码解读
• 关于CSS Reset 那些事（三）之 Normalize-zh.css 出炉