如何使用好css reset

网站建设知识 phpacg 3年前 (2018-04-24) 140次浏览 0个评论

最后出现 CSS reset 的目的是处置阅读器在默许样式上的诸多差异和效果。而现代阅读器在这方面的差异曾经小了很多,所以 CSS reset 的必要性就不那么高了。

另一方面,滥用 CSS reset 招致一些效果:

1. 不当的破坏了一切阅读器的基本样式。最典型的混蛋做法就是将一切元素的margin/padding设为0,及去掉ol/ul的列表样式,去掉h1~h6的字体大小样式。这招致blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式时(经常如此),缺乏恰当的样式展现。而由于视觉上无法区分,这进一步招致许多开发人员无视或误用这些语义元素,并严重破坏团队内其他希望运用语义元素的开发人员的任务流程。

2. 阅读器为配合控件作风,或出于可用性和不阻碍性思索,会有一些特定的默许样式。如一些阅读器关于 input[type=radio] 默许有 margin,以确保单选框的外观比拟协调。粗犷的reset招致控件外观能够在特定阅读器下失调。又如大局部交互控件在取得焦点时有虚线outline。去掉这样式而又不提供其他关于焦点的视觉反应机制(经常如此)能够招致可用性和不阻碍性效果。

3. 某些use case中,网页中有有一些较高独立性的局部,比如内嵌编辑器、widget、第三方内容等,CSS reset招致这局部的样式常需求完全重新覆写,而这种覆写原本能够大局部是不用要的,令人焦躁且能够遗漏。

4. CSS reset 通常会添加阅读器停止样式计算的本钱(即有一定的功用担负),由于它引入了许多的针对元素的全局规则,网页中简直一切元素都会婚配一条乃至几条的reset规则,且往往规则中的属性设定其实会被更specific的规则所掩盖(比如padding和margin)。极端状况下,能够某条reset规则中的一切属性设置实践上并没有在任何元素上失效(由于全部被更specific的规则给掩盖了),一切针对此规则的级联计算全都是糜费。

留意一点,招致这些效果共通的实质性要素是:CSS reset 的作用是全局性的(即缺乏选择器限定范围)。一切合格的顺序员都知道防止滥用全局变量,但是在 CSS 上他们就遗忘了这一点。

因此,除了上述4点所提到的效果,从可维护性下去看,一切全局变量能够招致的维护性噩梦也会以相似的方式发作在 CSS reset 上。比如一旦引入了 CSS reset,当项目规模大到一定水平,要再想把 CSS reset 从项目中去掉,就十分困难。

最后顺带说下,CSS 3 已参与 unset 关键字和 all 快捷属性(目前仅 Firefox 支持),可以更好的支持必要的 reset 需求。

补充:

有些同窗以为“没有那种很傻叉的重置的话,我觉得都算不上是滥用”。效果在于,怎样样算是“傻叉重置”?团队里的每团体对此看法分歧吗?未来新人进入老人分开,还能坚持对此看法分歧吗?

除了十分明白的运用 normalize.css 之类的既定方案的状况,许多团队罕见自行 customize 一个 reset.css 或混合了 reset 的 base.css。这种状况下,随着时间流逝最能够出现的情形就是此 css 会逐渐混入了更多的全局性的样式(由于合格的顺序员都有增强复用性的激动),从而堕入之前说的那些效果。因此,未雨绸缪的做法,就是一末尾就防止运用 CSS reset,或严厉明白和限定其作用(如 normalize 的方式)。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址