Olá, Acredito que para mim não ficou claro a explicação do modificador. Talvez porque até aqui não temos exemplos.
Poderiam dar uma palhinha dele?
Obrigada.
Solucionado
Olá, Acredito que para mim não ficou claro a explicação do modificador. Talvez porque até aqui não temos exemplos.
Poderiam dar uma palhinha dele?
Obrigada.
Olá, Nayana!
O modificador é utilizado para acrescentar algumas propriedades de uma classe genérica. Vamos pegar, por exemplo, o formato de botão genérico do GitHub. Ele tem borda arredondada, fundo verde e fonte branca. Então iríamos declarar assim o CSS.
.button {
background: green;
border-radius: 10px;
color: white;
}Mas o GitHub também tem a "zona de perigo", onde o botão tem as mesmas propriedades, com exceção da cor do fundo e da fonte, que são, respectivamente, branco e vermelha. Então iríamos reaproveitar o código do botão genérico acrescentando apenas as mudanças. Aí que entra o modificador.
.button--danger {
background: white;
color: red;
}Quando vamos declarar a classe no HTML, precisamos declarar a classe genérica seguida da classe com o modificador para que o botão herde as propriedades da primeira classe com as alterações da segunda.
<button class="button button--danger"> Clica aqui! </button>Para outros exemplos, recomendo esse site https://sparkbox.com/foundry/bem_by_example
Muito boa sua explicação Vinicius!!! Essa parte também tinha ficado curioso para entender melhor.