Olá, pessoal! Espero que este tópico te encontre bem!
Gostaria de compartilhar uma curiosidade que não consta nas aulas, mas acabei descobrindo na prática!
Observe a propriedade border nesta classe:
.apresentacao__links__link {
width: 378px;
border: solid 2px #22D4FD;
border-radius: 8px;
padding: 16px;
text-align: center;
text-decoration: none;
font-family: var(--fonte-corpo);
font-weight: 600;
font-size: 24px;
color: var(--cor-secundaria);
display: flex;
justify-content: center;
gap: 16px;
cursor: pointer;
}
O resultado seria uma borda de traço continuo, com 2px de espessura e na cor ciano. A descoberta ocorreu quando eu acrescentei propriedades especificas para o border-style, border-width e border-color, e alterei seus valores como abaixo:
.apresentacao__links__link {
width: 378px;
border: solid 2px #22D4FD;
border-style: dashed;
border-width: 4px;
border-color: #FFFFFF;
border-radius: 8px;
padding: 16px;
text-align: center;
text-decoration: none;
font-family: var(--fonte-corpo);
font-weight: 600;
font-size: 24px;
color: var(--cor-secundaria);
display: flex;
justify-content: center;
gap: 16px;
cursor: pointer;
}
O resultado desta classe foi uma borda tracejada, com 4px de espessura e branca!
Ou seja, quando você cria uma propiedade no css e atribui diversos valores de uma vez ao invés de inserir cada um deles em propriedades derivadas (border-style, border-color, etc), existe uma hierarquia de qual propriedade e valor serão executados! E quem ganha, pelos meus testes, foram sempre as propriedades específicas.
A partir desse momento, se tornou uma boa prática minha não inserir em propriedades "superiores" valores que podem ser descritos em propriedades específicas.
