(点击上方公众号,可快速关注)
作者:伯乐在线专栏作者 - chokcoco
如有好文章投稿,请点击 → 这里了解详情
如需转载,发送「转载」二字查看说明
有趣的 CSS 题目(1): 左边竖条的实现方法
有趣的 CSS 题目(2): 从条纹边框的实现谈盒子模型
有趣的 CSS 题目(3): 层叠顺序与堆栈上下文知多少
有趣的 CSS 题目(4): 从倒影说起,谈谈 CSS 继承 inherit
有趣的 CSS 题目(5): 单行居中,两行居左,超过两行省略
有趣的 CSS 题目(6): 全兼容的多列均匀布局问题
有趣的 CSS 题目(7): 消失的边界线问题
有趣的 CSS 题目(8): 纯CSS的导航栏Tab切换方案
有趣的 CSS 题目(9): 巧妙实现 CSS 斜线
有趣的 CSS 题目(10):结构性伪类选择器
大部分的时候,作为前端,我们在写 CSS 样式之前,都知道需要添加一份 reset.css ,但是有深究过reset.css 每一句的人恐怕不多,其实其中也是有很多学问的,知己知彼,真正厘清它,对提高 CSS 大有裨益。
reset.css
先来看看早先 YUI 的一个版本的 reset.css,这是一份历史比较悠久的 RESET 方案:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img{
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var{
font-style: normal;
font-weight: normal;
}
ol,ul{
list-style: none;
}
caption,th{
text-align: left;
}
h1,h2,h3,h4,h5,h6{
font-size: 100%;
font-weight: normal;
}
q:before,q:after{
content: '';
}
abbr,acronym{
border: 0;
}
首先,我们要知道 CSS RESET 的目的是什么?是为了消除不同的浏览器在默认样式上不同表现,但是到今天,现代浏览器在这方面的差异已经小了很多。
reset.css 存在的问题
看看第一段:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin: 0;
padding: 0;
}
这一条样式的目的是在于,清除元素的默认 margin 和 padding 。
但是这一段代码是充满问题的。
诸如 div 、dt、li 、th、td 等标签是没有默认 padding 和 margin 的;
如果我现在问你 fieldset 是什么标签,可能没几个人知道,相似的还有如 blockquote 、acronym 这种很生僻的标签,在 html 代码中基本不会出现的,其实没太大必要 RESET ,只会给每个项目徒增冗余代码;
上面的意思是,这一段代码其实做了很多无用功!
要知道,CSS RESET 的作用域是全局的。我们都知道在脚本代码中应该尽量避免滥用全局变量,但是在 CSS 上却总是会忘记这一点,大量的全局变量会导致项目大了之后维护起来非常的棘手。
再看看这一段:
h1,h2,h3,h4,h5,h6{
font-size: 100%;
font-weight: normal;
}
ol,ul{
list-style: none;
}
这一段代码,目的是统一了 h1~h6 的表现,取消了标题的粗体展示,取消了列表元素的项目点。
好像没什么问题,但是诸如 h1~h6、ol、ul 这些拥有具体语义化的元素,一旦去掉了它们本身的特性,而又没有赋予它们本身语义化该有的样式(经常没有),导致越来越多人弄不清它们的语义,侧面来说,这也是现在越来越多的页面上 div 满天飞,缺乏语义化标签的一个重要原因。
YUI 版本的 reset 不管高矮胖瘦,一刀切的方式,看似将所有元素统一在同一起跑线上,实则是多了很多冗余代码,得不偿失。
所以,YUI 的 reset.css 的诸多问题,催生出了另一个版本的 reset.css ,名为 Normalize.css。
Normalize.css
Normalize.css 有着详尽的注释,由于篇幅太长,可以点开网址看看,本文不贴出全部代码。
normalize.css v5.0.0
Normalize.css 与 reset.css 的风格恰好相反,没有不管三七二一的一刀切,而是注重通用的方案,重置掉该重置的样式(例如body的默认margin),保留该保留的 user agent 样式,同时进行一些 bug 的修复,这点是 reset 所缺乏的。
Normalize.css 做了什么
Normalize.css 注释完整,每一段代码都说明了作用,总结来说,它做了以下几个工作(摘自官网):
Preserves useful defaults, unlike many CSS resets.
Normalizes styles for a wide range of elements.
Corrects bugs and common browser inconsistencies.
Improves usability with subtle modifications.
Explains what code does using detailed comments.
简单翻译一下,大概是:
统一了一些元素在所有浏览器下的表现,保护有用的浏览器默认样式而不是完全清零它们,让它们在各个浏览器下表现一致;
为大部分元素提供一般化的表现;
修复了一些浏览器的 Bug ,并且让它们在所有浏览器下保持一致性;
通过一些巧妙的细节提升了 CSS 的可用性;
提供了详尽的文档让开发者知道,不同元素在不同浏览器下的渲染规则;
真心建议各位抽时间读一读 Normalize.css 的源码,加上注释一共就 460行,多了解了解各个浏览器历史遗留的一些坑。
关于取舍
那么,最后再讨论下取舍问题。是否 Normalize.css 就真的比 reset.css 好呢?
也不见得,Normalize.css 中重置修复的很多 bug ,其实在我们的项目中十个项目不见得有一个会用得上,那么这些重置或者修复,某种意义上而言也是所谓的冗余代码。
我觉得最重要的是,拒绝拿来主义,不要人云亦云,看见别人说这个 reset.css 好用,也不了解一下,拿来就上到项目中。又或者说写代码几年了,知道每次都引用一个 reset ,却从没有去细致了解其中每一句的含义。
关于维护
当团队根据项目需要(可能混合部分了 reset 或者 normalize )编写了一份适合团队项目的 reset 之后,随着不断的迭代或者说是复用,很有可能这个版本的 reset.css 会逐渐添加许多其他的全局性的样式,从而又重新陷入上面说的那些问题。
所以我觉得,reset.css 也是需要维护的,关于最佳的 reset.css ,没有一劳永逸的方案,根据项目灵活配置,做出取舍微调,适量裁剪和修改后再使用。
最后,搞技术的同学还是应该要有所追求,不要满足于消费别人的总结,一定要去源头看看。
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
专栏作者简介 ( 点击 → 加入专栏作者)
chokcoco:经不住流年似水,逃不过此间少年。
打赏支持作者写出更多好文章,谢谢!
关注「前端大全」
看更多精选前端技术文章
↓↓↓
温馨提示
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请后台提交工单处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请后台提交工单!
【免责声明】:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
【关于转载】:
本站尊重互联网版权体系,本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读,无任何商业用途,所有内容版权归原作者所有
如本站(文章、内容、图片、视频)任何资料有侵权,先说声抱歉;麻烦您请联系请后台提交工单,我们会立即删除、维护您的权益。非常感谢您的理解。
【附】:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
注:本站资源来自网络转载,版权归原作者和公司所有,如果有侵犯到您的权益,请第一时间联系我们处理!
-----------------------------------------------------------------------------------------------------------
【版权声明】:
一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、如有内容侵犯您的版权或其他利益的,请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后,情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------
源码村资源网 » css代码注释(CSS代码注释符号)
1 评论