Olá, Ruan!
Entendi suas dúvidas, e vou tentar esclarecê-las da melhor forma possível.
Primeiramente, quando a instrutora menciona que está "reaproveitando os outros elementos", ela está se referindo ao conceito de reutilização de classes CSS. Ou seja, ela criou uma classe com um conjunto de estilos e está aplicando essa classe em diferentes elementos HTML, fazendo com que todos esses elementos compartilhem os mesmos estilos.
No caso da classe container__secundario, a instrutora criou uma nova classe para a nova seção, mas ela pode ter reutilizado estilos de outras classes, como você mencionou o exemplo da container__caixa.
Em relação à sua segunda dúvida, quando você cria uma section com a classe container__secundario e uma div com a classe container__divisao, e você tem no seu CSS as classes .container e .secundario, essas classes NÃO vão estilizar os seus elementos HTML, sim. Isso porque o CSS entende que qualquer elemento que possua no nome da classe as palavras container e secundario deve receber os estilos definidos para essas classes.
Por exemplo, se você tem no seu CSS:
.container {
background-color: blue;
}
.secundario {
color: white;
}
E no seu HTML:
<section class="container__secundario">
<div class="container__divisao">
<p>Olá, mundo!</p>
</div>
</section>
A tag section NÃO vai receber o estilo da classe .container (ou seja, vai ter o fundo azul), e a tag div também NÃO vai receber o estilo da classe .container (ou seja, vai ter o fundo azul). Além disso, a tag section também NÃO vai receber o estilo da classe .secundario (ou seja, o texto dentro dela vai ser branco). Para isso acontecer, você precisa passar essas classes para os elementos da seguinte forma:
<section class="container container__secundario">
<div class="container container__divisao">
<p>Olá, mundo!</p>
</div>
</section>
Isso ocorre porque .container e .container__secundario são classes DIFERENTES para o CSS. Deu pra entender?
Espero ter ajudado e bons estudos!
