javascript - 如何正确重置浏览器样式(如 )？

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。当鼠标悬停在可点击的元素上时，光标会发生变化，这让我感觉更满意。