Herança de classe CSS em CSS

Herança CSS na marcação

Suponha que temos vários botões diferentes que compartilham o mesmo conjunto básico de propriedades, podemos fazer algo assim com nosso CSS:

.button {
  display: block;
  border-radius: 5px;
  background-color: gray;
  color: white;
}
.button-primary {
  background-color: blue;
}
.button-plain {
  background: none;
  color: gray;
  text-decoration: underline;
}

Neste exemplo, a classe button-primarye button-plain sugere que eles herdem propriedades da buttonclasse, mas para que realmente herdem essas propriedades, elas devem ser usadas juntas na marcação:

<a class="button button-plain”>Cancel</a>

Claramente, isso é redundante, mas, felizmente, há uma maneira de mover a herança para fora da marcação e de volta para nosso CSS, onde ela pertence.

Herança CSS em CSS

Podemos mover a herança para CSS com o seletor de atributos. O seletor de atributos nos permite aplicar as propriedades básicas do botão a qualquer elemento com uma classe que corresponda a “botão-“. Se parece com isso:

[class*=“button-“] {
  /* base button properties */
}
.button-primary { ... }
.button-plain { ... }

Essa é efetivamente uma forma muito simples de herança dentro do CSS. Agora, podemos limpar nossa marcação removendo a classe extra do botão:

<a class=“button-plain”>Cancel</a>