Как убрать повторяющийся код css?

Question

[PcheI1]

На сайте есть кнопки, выглядящие одинаково, и для каждой из них в css пишутся практически одинаковые стили, соответственно когда надо поменять например их фон надо делать это для каждой по отдельности, что занимает много времени, есть ли возможность задать какие то переменные в css или как то еще оптимизировать код? То что нагуглил не получается.
Пример кода:

a.button_admin {
  background: #f1e0cb;
  color: #474747;
  width: 100px;
  margin-bottom: 5px;
  text-align:center;
  height:40px;
  font-size: 30px;
  display: inline-block;
  /*color: white;*/
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  padding: .5em 2em;
  outline: none;
  border: 3px solid white;
  border-radius: 10px;
  transition: 0.2s;
}
a.button_admin:hover { border: 3px solid #dda1f5; }
a.button_admin:active { background: grey; }


a.button_home {
  background: #f1e0cb;
  color: #474747;
  margin-bottom: 5px;
  width: 100px;
  text-align:center;
  height:40px;
  font-size: 30px;
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  padding: .5em 2em;
  outline: none;
  border: 3px solid white;
  border-radius: 10px;
  transition: 0.2s;
}
a.button_home:hover { border: 3px solid #dda1f5; }
a.button_home:active { background: grey; }

Comments

[Ankhena]

Можно писать селекторы через запятую
.button_home, .button_admin {}
Только нужно убрать уточняющий селектор ссылки. Ведь, если эти стили нужно будет применить не к ссылке, а к кнопке, то ведь ничего же не изменится во внешнем виде.

А еще можно сделать отдельный класс для повторяющихся стилей.

Или использовать примеси в препроцессорах.

[PcheI1]

Ankhena, спасибо, буду знать)

Answer 1

[Stimulate]

a.button_admin,
a.button_home {

Comments

[PcheI1]

Спасибо большое, работает

Answer 2

[approximate solution]

какие то переменные в css или как то еще оптимизировать код?

Есть, это называется научиться использовать препроцессоры. А именно миксины, инклюды. Ну и почитать про принцип DRY.

Comments

[PcheI1]

Спасибо, почитаю)

[approximate solution]

PcheI1, webmasters.teamdev.com
Прям от начала и до конца проштрудируйте, и избавите себя от головной боли.

Answer 3

[Sergo Zar]

Согласен с Stimulate + ещё есть вариант. Это переменные:

:root{
--color: #f1e0cb;
}

/*элемент*/{
background: var(--color);
}

P.s. о переменных в css:
https://developer.mozilla.org/ru/docs/Web/CSS/Usin...

Comments

[PcheI1]

Спасибо, посмотрю)

[Sergo Zar]

PcheI1, незачто)