Borda Branca classe destaques__botao botao

Boa tarde Gilvane,

Na realidade, essa é uma maneira normal de trabalhar com o CSS.

O .botao é um elemento base e o .destaques__botao é um modificador que herda as características do elemento base, assim, quando se precisa de um botão com a borda vermelha, não é necessário declarar todas as propriedades novamente.

Vamos supor que precisemos criar 3 botões iguais, porém com a borda de cor diferente, ficaria assim (sem herdar as propriedades base):

<a href="#" class="destaques1__botao">Texto</a>
<a href="#" class="destaques2__botao">Texto</a>
<a href="#" class="destaques3__botao">Texto</a>

.destaques1__botao {
    text-align: center;
    display: block;
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    padding: 1rem 2rem;
    border: 1px solid var(--vermelho-forte);
    border-radius: 5px;
    color: var(--vermelho-forte);
    margin: 0 auto;
}

.destaques2__botao {
    text-align: center;
    display: block;
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    padding: 1rem 2rem;
    border: 1px solid var(--azul-claro);
    border-radius: 5px;
    color: var(--vermelho-forte);
    margin: 0 auto;
}

.destaques3__botao {
    text-align: center;
    display: block;
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    padding: 1rem 2rem;
    border: 1px solid var(--cinza-medio);
    border-radius: 5px;
    color: var(--vermelho-forte);
    margin: 0 auto;
}

Agora, herdando as propriedades:

<a href="#" class="destaques1__botao botao">Texto</a>
<a href="#" class="destaques2__botao botao">Texto</a>
<a href="#" class="destaques3__botao botao">Texto</a>

.botao {
    text-align: center;
    display: block;
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    padding: 1rem 2rem;
    border: 1px solid var(--branco);
    border-radius: 5px;
}

.destaques1__botao {
    color: var(--vermelho-forte);
    border-color: var(--vermelho-forte);
    margin: 0 auto;
}

.destaques2__botao {
    color: var(--vermelho-forte);
    border-color: var(--azul-claro);
    margin: 0 auto;
}

.destaques3__botao {
    color: var(--vermelho-forte);
    border-color: var(--cinza-medio);
    margin: 0 auto;
}

Boa tarde!

Isso eu ate entendi. Porem é exatamente essa minha dúvida. Ele usou a mesma classe, e em cada uma ele colocou uma border-color diferente. Mas resolvi usando a classe .destaques__botao e colocando as propriedades nela. Funciona tbem.

Poderia postar seu css completo?