前言
在 Web 开发中，CSS Reset 是一个常用的技术。它的作用是将 HTML 元素的默认样式重置为相同的基础值，从而消除浏览器默认样式带来的影响。这有助于开发者按照自己的需求编写 CSS，通常会使用一些标准的 CSS Reset 库，如 Normalize.css、Reset.css 等。但是，CSS Reset 也存在一些局限性，本文将讨论这些问题，并提供解决方案。
局限
跨浏览器的兼容性问题
CSS Reset 库旨在解决浏览器之间样式的差异，但它们不能完全解决所有浏览器兼容性问题。不同的浏览器可能需要不同的 CSS Reset 库或方法，这可能会导致样式在不同浏览器上出现问题，尤其是在移动端上。
某些元素的样式不允许重置
有些元素的样式是无法被 CSS Reset 重置的，如 input[type="radio"]、input[type="checkbox"]、select 等。这些元素的样式通常需要自己手动重置。
可能导致样式丢失
CSS Reset 将浏览器的默认样式覆盖掉了，可能会导致某些元素原本具有的样式丢失。如果没有正确控制重置的粒度，可能会导致一些元素出现意外的行为。
不会解决所有问题
CSS Reset 只是一个工具，它不能解决所有问题。它只是解决了浏览器样式之间的差异。如果你的问题不是由浏览器的默认样式引起的，那么 CSS Reset 将无能为力。
解决方案
小而可控的 Reset
尽可能只针对重置全站通用的样式做重置，避免过度重置导致样式丢失，可以通过 React 的 CSS-in-JS 方案 styled-components 实现组件级别的 Reset，但建议只对全局通用的元素进行 Reset。
模块化开发
使用现代前端框架、工具进行模块化开发，采用局部样式的方式，能够减少样式污染的问题，提高样式可控性。
针对特定问题，使用 CSS Reset 的补救措施
在 CSS Reset 无法解决的问题上，可以通过特定的补救措施来解决，例如：针对表单元素重置的问题，可以手动编写特定的 CSS 代码，针对浏览器的 Bug 可以使用 hack 来解决。
使用 CSS Modules
使用 CSS Modules 能够减少样式冲突的问题，使得样式在局部范围内被打包，从而减少全局样式带来的影响，同时可以避免 CSS Reset 对全局的影响。
结论
CSS Reset 是一个有用的技术，但需要注意它的局限性和使用方法，以避免样式丢失和兼容性问题。正确使用 CSS Reset 并采用针对性的解决方案，能够有效提高 Web 开发效率和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670cba2d5f551281025b7dbb