Question

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

我还能在CSS中做的只是： button: {all: unset;}

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

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

Answer 1

我想说，经过20年的努力，使用CSS时，反模式倾向于上下文。

使用{全部：未设置； }

假设您要为现代浏览器构建一个新的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添加到我所有的button中。将鼠标悬停在可点击元素上时，更改光标让我感到更加满意。

Answer 2

unset的使用非常强大，几乎可以完全在网络上得到支持。除非您必须创建IE支持代码，否则6-10和11都不接受它，请继续使用它您还可以在此处检查更详细的检查：https://caniuse.com/#search=unset

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

2 个答案:

使用{全部：未设置； }

请勿使用

那我该怎么用？