Сброс стилей

Довольно частое явление в интерфейсах — псевдокнопки. Я думаю, что многие могли видеть подобный код:

<div role="button" tabindex="-1">Button</div>

Конечно, так делать не стоит, это плохая практика. Для кнопок существует элемент <button>. У него есть встроенная роль, семантика, скринридеры правильно озвучивают, есть встроенная реакция на нажатие Enter и Space и много чего ещё.

Почему же тогда делают <div>? Одна из причин — встроенные браузерные стили: рамка, фон, внутренние отступы, шрифт и т.д. Причём в каждом браузере свой набор этих встроенных стилей и кнопки выглядит по-разному.

В итоге нужно либо подключать reset, либо переопределять стили. Тащить reset не всегда хочется, к тому же это лишний CSS. А при переопределении стилей есть риск забыть про какие-то частные случаи. Поэтому проще взять стилистически нейтральный <div> и сделать из него кнопку.

Но есть другое решение — свойство all. Это псевдоним для всех свойств CSS, кроме direction и unicode-bidi. Эти два свойства, прямо скажем, редкие гости, поэтому можно считать, что all — синоним для всех свойств. Поэтому можно сделать так:

button {
  all: unset;
  /* далее нужные стили кнопки */
}

Что тут происходит? Ключевое слово unset сбрасывает значение всех CSS-свойств до inherit (если свойство наследуемое) или initial (если не наследуемое). Иными словами, приводит их к значениям по умолчанию. Получаем кнопку, у которой все свойства имеют значения по умолчанию, прямо как у <div>. А далее уже можно определять нужные стили.

А таким образом можно в 3 строки сделать сброс всех свойств для всех элементов:

* {
  all: unset;
}

Но как в этом примере, сбрасывать все стили для всех элементов, всё-таки, я не рекомендую. А вот с кнопкой вполне себе вариант.