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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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.