CSS unset

Update: after I started using all: unset, I realized that the convenience tradeoff is probably not worth the danger and loss of precision. For example, the button code snippet below also removes default outline styles, which harms accessibility (and UX for all users). The more CSS I write, the more inclined I am to avoid shorthand properties that abstract away what properties the declaration sets. E.g. it’s more deliberate to declare animation-delay, animation-duration, etc. separately than to use the animation shorthand.

To reset a CSS property to its default value, you can use the unset value. And to unset all properties at once, you can use all: unset:

That saves a couple lines from the alternative:

I find myself doing the latter pretty often, so this should save a couple lines many times over.

Credit Radix UI docs for the find. unset is widely supported by modern browsers: caniuse.com/?search=unset