CSS Reset 是一种用于重置浏览器默认样式的方法。它的目的是让不同浏览器的页面呈现效果更加一致，避免因每个浏览器的默认样式不同而导致的页面样式不协调的问题。
虽然 CSS Reset 可以起到统一样式的作用，但其繁琐的代码和不可读的样式表语法，使得它的使用在现代的前端开发中越来越少。本文将探讨如何精简 CSS Reset 的代码、改进其可读性以及提高效率。以下是本文介绍的几个技巧。
1. 使用 Normalize.css
Normalize.css 是一种 CSS Reset 库，它主要侧重于解决那些你真正需要统一的样式问题，而在其他方面保留浏览器原有样式。相比于传统的重置样式表，Normalize.css 显得更加现代化和精细。
使用 Normalize.css 的好处在于，它可以避免一些浏览器特有的样式，而为了达到这个目的，你所需要做的只是将这段代码添加进你的 HTML 文件头部即可。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-6lVZIRQEblh8f3Vq3SYrPW1NQ8zvGvPnmBXoslTHspE=" crossorigin="anonymous" />
这样，你就可以不必关注这些底层特定的样式，而让 Normalize.css 帮你完成这些工作。
2. 不需要全部 Reset
CSS Reset 库通常会包含许多你在实际项目中用不到的样式。因此，你完全可以自己编写一份较小的 CSS Reset 代码，只包含你所需的那些样式，从而减少文件体积和负担的工作量。
比如，你可以下面的代码来重置掉一些默认样式，如以下代码所示：
-- -------------------- ---- ------- ----- ---- - ------- -- -------- -- ---------- ----- ------------ ------ ----------- - - - ---------------- ----- ------ -------- - --- -- - ----------- ----- ------- -- -------- -- -展开代码
通过这些代码，你可以清除掉大部分默认样式，并且保留那些有用的样式。当然，这需要根据你的项目实际需求来决定。
3. 采用现代化的选择器
在早些年，大多数 CSS Reset 库都采用了全局选择器（* {}）来匹配所有元素。这样做虽然可以重置所有元素的样式，但它对性能产生了不好的影响。
现代化的执行方式是只针对特定的 HTML 元素使用选择器。这样可以减少不需要的匹配工作，提升性能。
另外，将样式规则限制在特定范围内也使得代码更加容易维护、更少冲突。例如：
-- -------------------- ---- ------- ---- - ------- -- -------- -- ---------- ----- ------------ ------ ----------- - --- --- --- --- --- -- - ---------- ---- ------------ ------- -展开代码
4. 利用默认主题样式
一些 CSS Reset 库会重置掉 HTML 内置元素的默认主题样式，例如 input 元素、button 元素、select 元素等。
在实际项目中，你往往需要利用这些默认主题样式来保证页面的可访问性或者用户可用性。例如，你可以设置你父元素的主题样式，如下代码所示：
-- -------------------- ---- ------- ------------------- -------------------- -------- - ------ ----- ------- ----- -------------- --- ----- ----- -------- --- -- -------- ----- ----------- ------------ - ------- -------------------- - ------- -------- ----------- ----- ------- ----- -------- --- ----- ---------- ----- ------ ----- - ------ - ------ ----- ------------ ---- -------- ----- -------- --- -- ------- ----- -------------- --- ----- ----- ------- -------- ----------- ----- ----------- ------------ - - ------ - ------- ----- ----------- ------------ ---------------- ---------- ------- -------- ---------- ----- -展开代码
正如你所看到的，我们利用默认主题样式重写了 button 元素、select 元素、input 元素和 textarea 元素的样式，并且使这些元素更具可用性和可访问性。这些样式在你设计的风格中也可能非常有用。
小结
综上所述，虽然 CSS Reset 在较早的时期有其价值，但是随着 CSS 的发展和浏览器的优化，这种传统的 CSS 方法已经不能满足现在的需要了。通过使用 Normalize.css、将样式规则限制在特定范围内、利用默认主题样式等现代化方式，可以更好地提升效率，减小样式文件的体积。
因此，在你的项目中，不一定非要使用一个完整的 CSS Reset 库，你完全可以根据实际需求自己编写一份简单的样式表，仅包含必要的样式，同时保持代码更加简洁、易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b9ae6c306f20b3a6821989
