dúvida | CSS Grid: simplificando layouts

1 - Usando como exemplo

que é o pai. seguindo, nós temos um "h3" que pertence à

. a pergunta é, "caixa" está compondo o que nesse nome da div? Tem um momento que o professor estiliza o elemento usando ".caixa", e eu não entendi o porquê.

1.1 - Me corrija se estiver errado, mas até aonde eu entendi foi, que a section destaques é o pai a "div principal caixa" seria o filho e é por isso que ele usa "destaques__principal caixa" para indicar esta relação.

2 - No html mais abaixo tem outra div com nome de "destaques__categorias", e o mesmo acontece para indicar que "lista" é filho de "destaques__categorias" e por isso se escreve "destaques__categorias___lista" e neste caso eu nao entendi o porquê dos tres inderline antes do nome lista. Seria um padrão ou foi uma escolha aleatória do professor?

3 - Outra dúvida foi, para se usar o display flex teria que colocar no pai. Esta forma de escrever no html é para facilitar esta questão da relaçao pai e filho na hora de por o display flex, pois eu notei que no caso da lista (usando como exemplo) o professor colocou display flex direto no filho mas colocando a relaçao de pai filho que seria:

``
.destaques__categorias___lista {
            display: flex ;
}    
``
Seria esta a explicação?


Obrigadooo.

Oii Welliton! Tudo bem?

1 - A classe "caixa" está sendo usada para estilizar todos os elementos que a possuem de uma maneira específica. No caso, o professor usou ".caixa" para adicionar os estilos de alinhamento (align-items: flex-end) e display (display: flex), que são comuns a todos os elementos com essa classe. É uma maneira eficiente de aplicar estilos comuns a vários elementos ao mesmo tempo.

1.1 - Você está correto! A classe "destaques__principal caixa" indica que essa div é um filho da section "destaques". O nome da classe está seguindo uma metodologia de nomenclatura chamada BEM (Block Element Modifier), que é uma maneira de nomear classes de maneira a indicar a relação entre elas.

2 - A classe "destaques__categorias___lista" está usando três sublinhados antes de "lista" provavelmente devido a um erro de digitação ou uma escolha do professor. Na metodologia BEM, normalmente usamos dois sublinhados para indicar que um elemento é um filho de um bloco. Portanto, "destaques__categorias__lista" seria o esperado.

3 - O display flex é geralmente usado no elemento pai para afetar o layout de seus filhos. No entanto, não é obrigatório. Neste caso, o professor usou o display flex na lista (que é um filho de "destaques__categorias") para afetar o layout dos itens da lista. A relação pai-filho é indicada no nome da classe, mas não afeta diretamente onde o display flex é usado.

Abraços.