如果你做前端开发，你一定知道 CSS 的重要性。但你是否遇到过这些问题：
- 不同浏览器对同一标签的默认样式差异明显，需要手动调整；
- 页面元素的边距、字体、行高等默认值不尽如人意，需要手动调整；
- 使用第三方组件库时，可能会出现样式冲突的问题。
这些都是与 CSS 相关的问题，而 CSS Reset 能够帮助解决这些问题。
CSS Reset 是什么？
简单来说，CSS Reset 是一种样式重置方案，它通过给 HTML 元素添加一套全新的样式规则，以达到将浏览器默认样式清除的目的。其目的是以确保网页在不同浏览器环境下呈现出一致的效果。
注意，CSS Reset 并不是一种万金油的样式方案，它只能够让你在不同浏览器中得到统一的输入。但不代表它可以处理所有不同的场景问题。
CSS Reset 的基本原则
CSS Reset 不是一种终极解决方案，我们要做的是根据我们的需求选择一个合适的 CSS Reset，或者自己编写适合自己项目的CSS Reset 切记不要全部的样式全部重写，这样会影响到以前的CSS。
具体来讲，CSS Reset 的基本原则如下：
- 如果没有必要，不要定义 class，避免样式覆盖的混乱；
- 不要在 CSS 中使用 ID 选择器，以避免样式难以继承和修改；
- 不要通过浏览器内置的样式表设置默认字体和行高。
CSS Reset 的示例代码
// javascriptcn.com 代码示例
/* Mise en place */
/*
* 导入 margin 与 padding 包含的元素的 CSS，以便重置这些属性，提高代码清晰度。
* 更好的阅读体验：http://css-tricks.com/156-what-is-resetting-or-normalizing-css/
*/
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default padding */
ul[class],
ol[class] {
padding: 0;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul[class],
ol[class],
li {
margin: 0;
padding: 0;
}
/* Set core body defaults */
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
list-style: none;
}
/* 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 {
max-width: 100%;
display: block;
}
/* Natural flow and rhythm in articles by default */
article > * + * {
margin-top: 1em;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}总结
CSS Reset 是一种样式重置方案，可以帮助我们处理浏览器默认样式带来的问题，确保页面在不同环境下呈现出统一的效果。但我们必须谨慎地选择 CSS Reset 或编写自己的 CSS Reset，以避免影响页面的原来样式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652d37687d4982a6ebe9fab4