Um comentário sobre os seletores

Olá!

Quero destacar um detalhe que talvez possa servir para outros alunos, sobre a utilização de seletores no arquivo CSS.

Bom, acredito que grande parte do pessoal teve problemas ao adicionar classes dentro de tags criadas pelo bootstrap, pois a própria instrutora Juliana teve o mesmo problema. Então, inseri os seletore/classes, de forma mais hierárquica, para que assim, as classes geradas do bootstrap, respeitassem as nossas classes criadas:

Aqui é um exemplo da cor do nome da lading page, e, do título principal da seção receitas

a.navbar-brand.cor-especial, h2.cor-especial
{
    color: darkred;
}

/*Junto o seletor pai com o filho, para especificar quem pertence a quem;*/

E aqui temos outros exemplos diferentes utilizados:

img.card-img-top 
{
    object-position: 0 80%;
    object-fit: cover;
    height: 13em;
}


.btn.botao-cor-principal
{
    background-color: darkred;
    color: #fff;
}   

O objetivo foi fazer com que se tornasse um código mais prático, por exemplo, não foi preciso adicionar uma id para eles. Como uma boa prática, uso a id em últimos casos, ou, em casos muito específicos.

Porque? O bootstrap nos fornece muitas classes, e o uso da reutilização delas, é uma ótima idéia de aproveitamento.