CSS Reset 和 CSS Normalize 在实际项目中应用的优缺点-JavaScript中文网-JavaScript教程资源分享门户

什么是CSS Reset？

CSS Reset是一组CSS样式规则，旨在消除浏览器默认样式和不一致性，并将样式设置为尽可能一致的基础。

传统的CSS Reset将所有元素的样式都设为初始值，例如：

// javascriptcn.com 代码示例
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

这些规则通常被放在样式表的开头。

CSS Reset的优点和缺点

优点

统一风格：CSS Reset可以消除浏览器默认样式和不一致性，使得不同浏览器上的网页看起来更加一致。
避免重复工作：使用CSS Reset，开发人员不必为每个元素指定样式，而只需专注于需要的样式，可以极大地提高生产效率。

缺点

风格较重：CSS Reset的一个显著缺点是，它将所有元素的样式都设为初始值，这可能导致网页有点丑。在实际项目中，我们可能需要为特定的元素添加样式，使得网页看起来更具美感。
代码量较大：CSS Reset包含大量的CSS规则，这可能导致CSS文件变得很大。在实际项目中，我们可能需要自定义CSS Reset，仅包含我们需要的样式规则。

什么是CSS Normalize？

CSS Normalize与CSS Reset相似，但是它的目标不是消除所有浏览器默认样式，而是将现代浏览器之间的样式之间的不一致消除并创建一组可预测且一致的基础。

为了达到这个目的，Normalize重置了一些默认值，并引入了一些更为一致的样式，例如，对于所有浏览器，Normalize将输入元素的样式设置为：

// javascriptcn.com 代码示例
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  resize: vertical; /* 1 */
}

[type="checkbox"]:focus,
[type="radio"]:focus {
  outline: 1px dotted #000;
}

::-webkit-input-placeholder { /* 1 */
  color: inherit;
  opacity: 0.54;
}

::-moz-placeholder {
  color: inherit;
  opacity: 0.54;
}

:-ms-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

:-moz-placeholder {
  color: inherit;
  opacity: 0.54;
}

CSS Normalize的优点和缺点

优点

更加灵活：与CSS Reset不同，Normalize的目标在于减少浏览器之间的样式不一致，而不是完全清除所有默认样式，从而能够更好地满足项目需求。
代码量较小：CSS Normalize的代码量相对较小，只包含针对不一致样式的规则和替换了一些默认值的规则。
具有可预测性：Normalize通过尽可能使不同浏览器之间的样式一致，可以使网页的呈现更为可预测。

缺点

仍然存在风格问题：CSS Normalize并不能解决所有的浏览器之间的样式不一致问题，因此在实际项目中，我们可能还需要针对一些问题元素编写特定的样式。
需要了解细节：因为Normalize的目标是创建一组可预测且一致的基础，因此在使用它之前，我们需要了解一些浏览器之间的样式不一致问题，才能正确应用规则。

总结

在实际项目中，我们可以选择使用CSS Reset或CSS Normalize，根据项目需求进行选择。CSS Reset更适用于需要快速地消除浏览器默认样式的情况，而CSS Normalize则更适用于需要灵活地控制一些元素样式的情况。但不管选择哪种，我们都需要了解细节，才能正确使用它们。

参考资料

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6530ce967d4982a6eb25e859