什么是CSS Reset

html-css013

什么是CSS Reset,第1张

就是重置css样式,也可以说是初始化css样式。

因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如<button>标签,在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的,所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。

* { padding: 0margin: 0border: 0}这也算是一个css reset只是效率低不推荐!

每个浏览器都有一些自带的或者共有的默认样式,会造成一些布局上的困扰,css reset的作用就是重置这些默认样式,使样式表现一致,比如 *{margin:0padding:0}就是一个最简单的css reset

最初出现 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导致这部分的样式常需要完全重新覆写,而这种覆写本来可能大部分是不必要的,令人烦躁且可能遗漏。参考此问答:怎样不让 CSS reset 样式覆盖掉编辑器内的文章样式?

4.

CSS reset

通常会增加浏览器进行样式计算的成本(即有一定的性能负担),因为它引入了许多的针对元素的全局规则,网页中几乎所有元素都会匹配一条乃至几条的

reset规则,且往往规则中的属性设定其实会被更specific的规则所覆盖(比如padding和margin)。极端情况下,可能某条reset

规则中的所有属性设置实际上并没有在任何元素上生效(因为全部被更specific的规则给覆盖了),所有针对此规则的级联计算全都是浪费。

注意一点,导致这些问题共通的本质性因素是:CSS reset 的作用是全局性的(即缺乏选择器限定范围)。所有合格的程序员都知道避免滥用全局变量,但是在 CSS 上他们就忘记了这一点。

因此,除了上述4点所提到的问题,从可维护性上来看,所有全局变量可能导致的维护性噩梦也会以类似的方式发生在 CSS reset 上。比如一旦引入了 CSS reset,当项目规模大到一定程度,要再想把 CSS reset 从项目中去掉,就十分困难。

解决方法:

1. 不使用 CSS reset,或使用那些谨慎的,只是用来消除浏览器默认样式不一致的真正的 CSS reset(更准确的称谓或许是 CSS normalize,参考此问答:Normalize.css 与传统的 CSS Reset 有哪些区别?)。

2. 对于特定的reset需求,只在真正需要的时候,单独设置。若要提高代码复用程度,可以引入CSS预处理,以mixin来做。例子:

@mixin reset-box() {

list-style: none

padding: 0

margin: 0

}

@mixin reset-font() {

font-size: 1em

font-weight: normal

font-style: normal

}

//真正用的场景

html#示例网站 {

nav#全站导航条 ul {

border: 1px solid

+reset-box()

}

section.侧栏模块 {

border: 1px solid

h1 {

background: navy

color: white

border-bottom: 1px solid

+reset-box()

+reset-font()

}

}

}

(以上以伪代码书写,请自行脑补转换为 SASS/Stylus/LESS 等。)

3. 对于已经使用 CSS reset 的同学,可以籍由支持局部 import 的 CSS 预处理器(比如 stylus)的帮助,从限定其在特定 selector 之下开始,逐步控制其影响范围。如:

html#示例网站 {

... // 不依赖 CSS reset 的部分

.legacy-part { // 页面中仍依赖 CSS reset 的部分

@import 'reset.css'

}

}

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

以上。

补充:

有些同学认为“没有那种很傻叉的重置的话,我觉得都算不上是滥用”。问题在于,怎么样算是“傻叉重置”?团队里的每个人对此认识一致吗?将来新人进入老人离开,还能保持对此认识一致吗?

了非常明确的使用 normalize.css 之类的既定方案的情况,许多团队常见自行 customize 一个 reset.css 或混合了

reset 的 base.css。这种情况下,随着时间流逝最可能出现的情形就是此 css

会逐渐混入了更多的全局性的样式(因为合格的程序员都有增强复用性的冲动),从而陷入之前说的那些问题。因此,未雨绸缪的做法,就是一开始就避免使用

CSS reset,或严格明确和限定其作用(如 normalize 的方式)。