CSS Reset & Modern CSS Reset

目录

什么是CSS Reset？

CSS Reset为什么存在？

CSS Reset该怎么写？

CSSReset示例

1.淘宝（CSS Reset）：

2.百度（CSS Reset）：

Modern CSS Reset

核心观点

整个 Reset 的源码比较简单：

其中一些比较有意思的点，单看盒子模型：

再看看在用户体验及可访问性方面的一些做法：

结合实际环境

小结

---

什么是CSS Reset？

CSS Reset，又叫做 CSS 重写或者 CSS 重置，意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式—— CSS Reset

CSS Reset为什么存在？

不同核心的浏览器对CSS的解析效果呈现各异，导致所期望的效果跟浏览器的“理解”效果有偏差，而 CSS Reset 就是用来重置（复位）元素在不同核心浏览器下的默认值以尽量保证元素在不同浏览器下的同一“起跑线”的样式方法

CSS Reset该怎么写？

对于不同的项目的 CSS Reset 也会有变化。CSS Reset 应当是个人积累的经验的总结，重置一些经常使用的，在不断学习中修改。

那作为初学者该如何写呢？首先可以参考一些网站的 CSS Reset ，切不可复制过来直接用。应当像砌墙一样，一块砖一块砖的积累。当你觉得你每次都要写这个重置样式，那就加进你的 CSS Reset表吧。

CSSReset示例

1.淘宝（CSS Reset）：

html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:””;
}

2.百度（CSS Reset）：

body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}

而我最近比较喜欢的一个 CSS Reset 方案，源自于—— Modern-CSS-Reset 。

Modern CSS Reset

核心观点

1. 重置合理的默认值

2. 关注用户体验

3. 关注可访问性

整个 Reset 的源码比较简单：

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

其中一些比较有意思的点，单看盒子模型：

*,
*::before,
*::after {
  box-sizing: border-box;
}

Normalize.css 是不推荐这么做的，大部分元素的 box-sizing 其实都是 content-box，但是，对于实际开发，全部元素都设置为 border-box 其实是更便于操作的一种方式。

再看看在用户体验及可访问性方面的一些做法：

html:focus-within {
  scroll-behavior: smooth;
}

scroll-behavior: smooth 意为平滑滚动，当然这里是设置给了 html:focus-within 伪类，而不是直接给 html 赋予平滑滚动，这样做的目的是只对使用键盘 tab 键切换焦点页面时，让页面进行平滑滚动切换，带来更好的使用体验。

如果我们设置了如下 CSS：

`html {
scroll-behavior: smooth;
}`

可能会起到一起副作用，譬如，当我们在页面查找元素时候（使用 Ctrl + F、或者 Mac 的 Commond + F），这段 CSS 代码可能会严重延缓我们的查找速度：

再看看这段代码：

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

prefers-reduced-motion 规则查询用于减弱动画效果，除了默认规则，只有一种语法取值 prefers-reduced-motion: reduce，开启了该规则后，相当于告诉用户代理，希望他看到的页面，可以删除或替换掉一些会让部分视觉运动障碍者不适的动画类型。

vestibular motion disorders 是一种视觉运动障碍患者，翻译出来是前庭运动障碍，是一种会导致眩晕的一类病症，譬如一个动画一秒闪烁多次，就会导致患者的不适。

使用方法，还是上面那段代码：

.ele {
    animation: aniName 5s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
    .ele {
        animation: none;
    }
}

结合实际环境

当然，结合实际环境，目前国内整体不太注重可访问性相关的内容。

而且，许多业务根本无法抛弃一些老旧浏览器，仍然需要兼容 IE 系列。

因此，对于现阶段的 Reset 方案，可以灵活搭配：

1. 如果你的业务场景仍然需要考虑一些老旧浏览器，依旧需要兼容 IE 系列，Normalize.css 的大部分功能都还是非常好的选择

2. 如果你的业务场景只专注于 Chrome 或者是 Chromium 内核，Normalize.css 内的许多内容其实可能是一些实际中根本不会遇到或者用上的兼容适配，可以进行必要的精简

3. 如果你的业务是全球化，面向的用户不仅仅在国内，你应该开始考虑更多可访问性相关的内容，上述的 Modern CSS Reset 可以借鉴一下
   因此，更应该的情况是，根据实际的业务需要，吸收多个业界比较常见 / 知名的 Reset 方案形成自己业务适用的。

小结

前端早期，各浏览器对 CSS 的规范支持和理解是不同的，为了解决网站风格的统一，出现了 CSS Reset 。

早期的 CSS Reset 无脑兼容各浏览器被称为硬重置，因为硬重置会导致许多不必要的覆盖和放弃了浏览器原生支持的特性，就被弃用了。

这时候出现了软重置，它只简单的规范了各种元素的样式和纠正一些错误，做到对元素最小的侵入，而软重置中的翘楚就是 Normalize.css。

最后的集大成者是个性化重置，就是我们平时用到第三方 UI 框架。

最后说一句，CSS Reset 是完全需要的，不然会导致网址布局的混乱，但同时记住不要使用硬重置做过多的事情，来保护 CSS 的原生特性。