前端开发者关于css Reset 那些事（ 四） 之 构架css基础样式库前言先来回顾一下前几章节， 我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css 源码解读 Normalize – zh.css 出炉围绕着 CSS Reset 这个话题我们已将讲了3章节， 从中了解到CSS Reset的作用， Normalize.css的优势， 以及它是如何帮我修复跨浏览器的兼容性问题的； 这一章节内容会弱化 CSS Reset 的主题， 不是因为这章节与 CSS Reset 无关了， 而是因为我们要基于它去扩展更多的内容， 来帮助我们解决实际开发中更多的问题。
现在回到我们这一章节的标题， 将它做下补充：《 关于CSS Reset 那些事（ 四） 之 基于CSS Reset 构架CSS基础样式库》 CSS 基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题：
1. 假设你要做一个游戏单页面， 网页上并不存在表单内容， 那么你就要移除一些冗余的代码， 开始自定义 Normalize.css 样式来满足自己的需求。
2. 假设你要做一份文案策划的网页， 包含很多文字排版时， 此时 Normalize.css 也许并不完全适合你， 因为它的默认字体设置和排版布局可能不能满足你的要求。
3. 假设你要做一个企业类型的网站， 并考虑跨浏览器兼容性， 网站包含内容元素也很丰富， 那么你可以选择使用 Normalize.css 来统一你的浏览器样式， 但是它仅仅帮助我们解决了样式统一的问题是不够的， 你是不是还要设计一套布局系统， 来解决该网站的布局问题呢？ 从以上几个问题可以看出， 在构建大型网站的时候， 我们可以把Normalize.css作为基础样式， 然后根据不同的页面需求， 进行添加样式覆盖它。
但是这只是我们的第一步， 关于网页开发中更多的基础解决方案还有很多， 比如刚刚说的布局系统， 或许你还会用到很多常用的CSS问题解决方法， 如浮动和清除浮动， 自适应两端对其等等。
那么下一节， 我们就来分析一下CSS 基础库到底包含什么内容？ 什么是基础库我认为基础样式库 始终 能帮我们解决开发时遇到的一些基础性问题： 如浏览器样式不统一， 需要重置样式； 如基础表单样式过于难看不易操作， 需要优化其样式； 如布局样式需要重复编写， 需要一套稳定复用的解决方案； 如一些样式的浮动， 对齐操作， 需要统一管理起来进行多次复用； 如常见的CSS动画效果， 需要统一起来管理方便复用； 如一些常用的图标， 需要一套可复用的字体图标； 如需要打印， 提供一套更为合理的打印样式基础库初衷和未来方向： 最大程度减少开发难度提供简洁高效开发体验趋于模块化样式构建规范做为未来UI组件库核心基础始终站在巨人肩上基础库的结构normal.css[基于Normalize.css自定义模块， 继承其优势， 改善文字与部分细节]html5.css[html5样式修复， 默认会导入normal.css， 可按需引用]form.css[表单的一些基础样式， 可按需引用]grid.css[响应式网格系统， 优化命名与精简代码， 可按需引用]utils.css[html中直接使用的工具类， 可按需引用]iconfont.css[一套复用率极高的字体图标， 可按需引用]animate.css[常用的动画效果组合， 可按需引用]print.css[优化默认的打印样式， 可按需使用]1 2 3 4 5 6 7 8 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 进行压缩合并后再使用。 下一节我们来细化基础样式库的内容， 看一看它都需要帮我们做哪一些事情。
CSS 基础库内容样式重置方案 normal.cssNormalize.css不仅统一了样式， 还保留元素的可辨识性， 这是我们应该继承和发扬的优点， normal.css 也会参考借鉴 Normalize.css 所有优势， 不过为了让其更简洁， 让开发者更容易上手， 我选择对它进行瘦身， 比如移除一些不会用到的元素标签 hgroup， 将一些元素进行分模块管理， 比如 html5.css， form.css 等， 方便按需求灵活引用。
normal.css 包含内容以及调整部分字体约定62 .5 % ，方便单位转换统一元素的内外边距设置全局字体， 修复表单元素不继承父级font的问题添加链接基本样式移除列表元素的默认标识移除元素默认边框移除链接默认的下划线移除单元格间距让其边重合修复th不继承text – align， 默认左对齐重置标题， 采用自定义把所有斜体标签默认扶正统一引用标记统一上标和下标HTML5元素 html5.csshtml5.css主要是用于解决html5新元素在旧浏览器中的不识别， 并且修复一些元素存在的隐性问题。
但是为什么不把 html5.css 这部分内容直接放入 normal.css， 而是考虑将其进行分模块管理呢？ 是为了考虑一部分人在页面中已经使用了像html5shiv的解决方案来兼容低版本浏览器， 所以这里就体现出了分模块的灵活性， 拆分为一个独立的css文件， 需要时再进行使用。
不过这里默认使用 @import “html5.css”
进行导入只是为了预览调试， 请在实际使用中将代码拷贝合并至 normal.css， 或者使用 yuicompressor， Grunt 进行压缩合并后再使用。
html5.css 包含内容以及调整部分修复HTML5新元素不能正确显示的问题修复 progress 元素的对其问题元素的对其问题 修复没有 controls 属性的audio显示出来属性的audio显示出来 修复 hidden 属性不起作用的问题属性不起作用的问题 修复 svg 元素 overflow 不正常的问题元素 不正常的问题 统一 mark 标签的样式标签的样式 修复拖动元素添加拖动的光标表单元素 form.cssform.css修复表单元素在不同浏览器下的默认样式， 尤其是IE低浏览器版本下的一些怪异问题； 并且还修复了一些表单显示状态， 致力于提升用户体验； form.css 包含内容以及调整部分统一 fieldset 元素的显示样式元素的显示样式 修复 ‘legend’
元素的若干问题元素的若干问题 修复表单元素字体与字号不继承的问题统一表单元素的垂直对其方式统一表单元素的 overflow 属性为visible属性为visible 重置按钮禁用时光标样式修复 checkbox, radio 的属性 box – sizing: border – box;, 的属性;
统一 button, input 内边距和内边框, 内边距和内边框 统一 select 的样式的样式 修复 textarea 只能为纵向拉伸ui – btn 按钮组件包含的内容初始化默认按钮样式， 增加不同状态下的效果提供多种场景按钮， 如主要， 警告与错误提供可定制的大小按钮， 如较小， 更小， 一般， 较大， 更大提供组合式按钮支持 iconfont.css， 搭配图标按钮使用使用示例 < button type = “button”
class = “ui-btn” > 默认 < /button> 1 < button type = “button” class = “ui-btn” > 默认 < /
button > 栅格系统 grid.css借鉴了Bootstrap的一套响应式流式栅格布局系统， 随着屏幕或视口（ viewport） 尺寸的增加， 系统会自动分为最多12列。 对栅格系统的样式命名进行重新组织， 简化和移除工具代码， 只保留核心布局样式。
简洁即是高效率。 grid.css包含内容以.ui – grid – container(固定宽度) 和.ui – grid – fluid(100 % 宽度) 用于包裹.ui – row(固定宽度) 和(100 % 宽度) 用于包裹.ui – grid – container(固定宽度) 通过媒体查询来实现响应式宽度(固定宽度) 通过媒体查询来实现响应式宽度.ui – row用于包裹一组.ui – col – 1–.ui – col – 12 列用于包裹一组– 列xs, sm, lg通过媒体查询来实现响应式, , 通过媒体查询来实现响应式.ui – col – xs – * 超小屏幕手机( <768px) 超小屏幕手机( <768px).ui – col – sm – * 小屏幕平板(≥768px) 小屏幕平板(≥768px).ui – col – * (默认) 中等屏幕桌面显示器(≥992px)(默认) 中等屏幕桌面显示器(≥992px).ui – col – lg – * 大屏幕大桌面显示器(≥1200px) 大屏幕大桌面显示器(≥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 > 1 2 3 4 5 6 7 8 < 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包含内容以及调整部分浮动元素与清楚浮动元素垂直与水平滚动元素显示类型元素与文本隐藏文本不换行文本强制换行文本溢出显示省略号文本左右对齐文本垂直对齐常用符号(关闭， 箭头， 下三角等) 自适应两端对齐未知高度垂直居中列表平铺使用示例<!– 文字溢出显示省略号 –><divclass=”fn-text-ellipsis”>文字那是相当的长</div>1< ! — 文字溢出显示省略号 — ><divclass=”fn-text-ellipsis”>文字那是相当的长< / div>字体图标iconfont.cssiconfont都已经很熟悉了，是一种把图标放入自定义字体中，然后使用字体图标来替代普通图标的技术，使用起来方便灵活。
iconfont.css包含内容以及调整部分 •提供网页中66个最常用的字体图标 •可搭配form.css`按钮组件使用使用示例<buttonclass=”ui-btn”><bclass=”iconfont”>~</b>提交</button>1<buttonclass=”ui-btn”><bclass=”iconfont”> ~ < / b>提交< / button>动画库animate.cssCSS3的动画让网页变的更加有活力，所以这里引入一套CSS3动画库，可以通过简单的引用类名的方式在你的项目中实现最常见的动画效果。
animate.css包含内容以及调整部分弹跳闪烁摇动淡入(up,down,left,righ)) 淡出滑入(up,down,left,righ)) 滑出使用示例<divclass=”animated fadeIn”>淡入效果</div123<divclass=”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基础样式库只是前端解决方案中最小的一个分支，其实我们还可以完善更多的内容来帮助解决前端开发中所有的问题，就犹如下面这个表格。
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册