Não entendi sobre o uso de "__" para definir os elementos da class.

Bom dia Kelwin,

O uso do __ é baseada na metodologia BEM - Block Element Modifier (Bloco Elemento Modificador). Essa metodologia é utilizada seguindo técnicas que facilitam a construção do código, melhorando o desenvolvimento e a agilidade, diminuindo o tempo de manutenção e auxiliando na conservação do código.

Respondendo sua 1° pergunta - podemos utilizar mais que uma classe dentro de uma TAG, no caso que mencionou seria a TAG DIV. Dentro desta tag estão sendo utilizadas duas classes a primeira seria a classe .destaques__secundario a segunda seria caixa. As duas são classes diferentes que iram receber valores diferentes para facilitar no momento da construção.

Respondendo sua 2° pergunta - Entendendo a hierarquia -

<section class="destaques"> /* 1° nível - Classe Pai  (destaques)*/
            <div class="destaques__principal caixa"> /* 2° nível - 1° filho (destaque(nome do pai)__principal(nome do filho))*/
                <h3 class="destaques__titulo">Fortnite</h3>
  </section>

Respondendo sua 3° pergunta

Você pode ler mais sobre o assunto neste link: https://desenvolvimentoparaweb.com/css/bem/

Extremamente esclarecedor, e já sou grato desde já.

Porém, um adendo, se eu me referir no CSS, de acordo com seu exemplo:

destaques:nth-child(2)

tem o mesmo significado que:

destaques__titulo:nth-child(2)

Pois de acordo com o que entendi lendo o artigo e sua resposta, o nth-child() só se aplica a classe, e não ao seu elemento.

Correto?

Brother não tem o mesmo significado. Porque destaque é a classe pai.

Veja pelo código

 <section class="destaques"> /* pai de todos */
            <div class="destaques__principal caixa">... </div> /* 1º Filho */ 
            <div class="destaques__secundario caixa">...</div> /* 2º Filho */
            <div class="destaques__secundario caixa">...</div>  /* 3º Filho */
            <div class="destaques__secundario caixa">...</div>  /* 4º Filho */
            <div class="destaques__secundario caixa">...</div>  /* 5º Filho */
            <div class="destaques__categorias">...</div>  /* 6º Filho */
        </section>

e quando utiliza:

destaques__titulo:nth-child(2)

Vc quer trabalhar o elemento que está dentro do segundo filho. O h3. Ou seja

<section class="destaques"> /* pai de todos */
            <div class="destaques__principal caixa">... </div> /* 1º Filho */ 
           ** <div class="destaquessecundario caixa">...</div> /* 2º Filho */**  o elemento que está aqui dentro.
            <div class="destaques__secundario caixa">...</div>  /* 3º Filho */
            <div class="destaques__secundario caixa">...</div>  /* 4º Filho */
            <div class="destaques__secundario caixa">...</div>  /* 5º Filho */
            <div class="destaques__categorias">...</div>  /* 6º Filho */
        </section>

pra ajudar da uma olhada em outro exemplos: https://daily-dev-tips.com/posts/css-nth-child-selector-basics/

Muito obrigado Marcelo, você sanou minhas dúvidas com muita clareza! Além de eu ter entendido o sentido, também consegui imaginar aplicações no código utilizando BEM e nth:child().

Um forte abraço e sucesso na sua caminhada!