搜索
首页web前端html教程关于CSS Reset 那些事(四)之 构架CSS基础库_html/css_WEB-ITnose

前言

先来回顾一下前几章节,我们都说了哪些内容:

  • 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    [优化默认的打印样式,可按需使用]

    我们按照需求,初步划分了基础样式库的结构,起初html5.css的内容是考虑直接放在normal.css里面的,但是为了考虑一部分人在页面中使用了像html5shiv的解决方案来兼容低版本浏览器,所以这里就体现出了分模块的便捷性,拆分为一个独立的css文件,需要时再进行使用,不过这里默认使用@import "html5.css"进行导入只是为了预览调试,请在实际使用中将代码拷贝至normal.css,或者使用yuicompressor进行压缩合并后再使用。

    下一节我们来细化基础样式库的内容,看一看它都需要帮我们做哪一些事情。

    CSS 基础库内容

    样式重置方案 normal.css

    Normalize.css不仅统一了样式,还保留元素的可辨识性,这是我们应该继承和发扬的优点,normal.css也会参考借鉴Normalize.css所有优势,不过为了让其更简洁,让开发者更容易上手,我选择对它进行瘦身,比如移除一些不会用到的元素标签hgroup,将一些元素进行分模块管理,比如html5.css,form.css等,方便按需求灵活引用。

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

    • 字体约定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-* 超小屏幕 手机 (
    • .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 出炉
    声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

    公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

    如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

    本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

    HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

    文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

    如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

    本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

    &lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

    本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

    我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

    本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

    &gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

    本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

    &lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

    本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    AI Hentai Generator

    AI Hentai Generator

    免费生成ai无尽的。

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    2 周前By尊渡假赌尊渡假赌尊渡假赌
    仓库:如何复兴队友
    4 周前By尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    4 周前By尊渡假赌尊渡假赌尊渡假赌

    热工具

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

    PhpStorm Mac 版本

    PhpStorm Mac 版本

    最新(2018.2.1 )专业的PHP集成开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    MinGW - 适用于 Windows 的极简 GNU

    MinGW - 适用于 Windows 的极简 GNU

    这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    功能强大的PHP集成开发环境