如何正确重置浏览器样式（如）？

Question

很多消息来源都希望我通过重置大量的个人属性来重置html，例如：https://css-tricks.com/overriding-default-button-styles/

我在CSS中也可以做的只是：button: {all: unset;}

这是不是一种反模式？我知道我需要一个polyfill，但它并不像几乎所有的项目都没有使用那些。

编辑：评论告诉我，它太不明确，我的意图是什么。我希望有一个清晰而坚实的标记。我有一个<span>标签，其中包含一个充当按钮的图标。我得到了（有效的）反馈，这是一个按钮，因此应该用<button>标签包装。当我这样做时，按钮标签显然带来了一些浏览器的外观和感觉，就像背景和边框使图标看起来很奇怪。我不得不删除它，并想知道，如果我应该删除特定的CSS属性或只是所有这些属性。

Answer 1

我会说，经过20年的努力，与CSS相反，反模式往往是语境。

使用{all：unset; }

假设您正在为现代浏览器构建一个新的CSS库。在这种情况下，我想将button剥离到裸金属，以捕捉我可能的每一个边缘情况。我们告诉人们，嘿，如果你使用我很棒的库，你可以在任何地方使用它，并期望机器般的渲染一致性。第一次正确地做到这一点有很大的压力。否则，我们将每隔一周修补一次我们的图书馆，因为一些慷慨激昂的Opera Mini用户正在敲门。

不要使用它

对于我们许多人来说，我们正在构建组件或电子商务小部件。我们中的许多人都没有建立自以为是的CSS库。如果你是像我一样为其他人或侧面项目推出大量像素的人，使用该规则只会浪费时间。我可能最终会添加一些{ all: unset; }会删除的样式。当我是一个年轻的开发者时，我通常会选择会议的路径而不是背景和实用性，并确信通过纪律和痛苦获得胜利的方式。通常情况下，我最终误用了我的时间，更好地花在了其他事情上。

那我该怎么用？

使用button时最大的一般罪犯：

• 不需要的background-color
• 90年代样式的不需要的边框（一开始？插入？）
• 失去继承的font-family
• 一些旧的移动浏览器上的按钮式外观

这是我典型的默认button造型：

.button-reset {
  background-color: transparent;  
  border: none;
  font-family: inherit; 
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;  
}

旁白：我想将cursor: pointer添加到我所有的buttons中。当悬停可点击元素时，光标变化对我来说感觉更令人满意。

Answer 2

unset的使用很强大，几乎完全支持在网络上。除非你必须创建IE支持代码，因为6-10和11都不接受它你也可以查看更详细的检查：https://caniuse.com/#search=unset