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-primary
e button-plain
sugere que eles herdem propriedades da button
classe, 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>