什么是 CSS Reset？
CSS Reset 是一段 CSS 代码，用于重置页面元素的默认样式。这样做可以消除不同浏览器之间的样式差异，更好地控制网页布局和样式。经典的 CSS Reset 代码如下：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}这段代码将所有元素的外边距和内边距都设置为零，并将盒模型设置为 border-box，这是一种更加直观的盒模型，可以更好地控制元素的尺寸。
伪元素问题
然而，使用 CSS Reset 后，我们可能会遇到一个问题：伪元素的样式也被重置了。伪元素是指在元素之前或之后添加的虚拟元素，常用的伪元素有 ::before 和 ::after。
例如，我们有一个元素，通过伪元素添加一些装饰性的内容：
.btn::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}使用 CSS Reset 后，我们会发现伪元素的样式不再生效了。这是因为伪元素的样式也被设置成了外边距和内边距为零，盒模型为 border-box。
解决方案
解决这个问题有多种方法，这里介绍两种常用的方案。
方法一：重置伪元素样式
我们可以在 CSS Reset 之后再重新设置伪元素的样式，示例如下：
-- -------------------- ---- ------- - - ------- -- -------- -- ----------- ----------- - ------------ - -------- --- -------- ------------- ------ ----- ------- ----- ----------------- ---- -- --------- -- ------- -- -------- -- ----------- ------------ -
这样做可以解决伪元素样式失效的问题。但是，如果我们有很多伪元素，每个都重新设置一遍显然很麻烦。
方法二：使用自定义属性
更好的方案是使用 CSS 自定义属性（Custom Properties）。CSS 自定义属性可以用来存储样式值，可以在整个文档中共享，也可以在不同的规则之间共享。我们可以将伪元素的样式存储在一个自定义属性中，然后在伪元素选择器中使用该属性。
示例如下：
-- -------------------- ---- ------- -- ------- -- ----- - -------------- ----- - -- ------- -- ---- - -------- ------------------- - ------------ - -------- --- -------- ------------- ------ ----- ------- ----- ----------------- ---- -- ------- -- -------- ------------------- -
这样做的好处是可以方便地修改伪元素的样式，只需要修改自定义属性的值就可以了。同时，这也避免了重复设置伪元素样式的问题。
总结
使用 CSS Reset 可以消除浏览器之间的样式差异，但也可能会导致伪元素的样式失效。解决这个问题的方法有多种，可以重新设置伪元素样式，也可以使用 CSS 自定义属性存储伪元素样式。使用自定义属性的好处是方便修改，避免了重复设置样式的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c4e2c583d39b488183f630