Olá,
Gostaria de saber porque as classes das sections não tem o " __ " como: < section class="container principal" > , mas as outras classes tem como: < div class="container__caixa" > ?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá,
Gostaria de saber porque as classes das sections não tem o " __ " como: < section class="container principal" > , mas as outras classes tem como: < div class="container__caixa" > ?
Bianca, isso acontece pois o instrutor está utilizando a metodologia BEM pra organizar e padronizar a nomenclatura de classes do projeto.
No BEM a estrutura do projeto é dividida em Bloco, Elemento e Modificador (daí vem o nome BEM), onde:
container.__, ficando desta maneira: container__caixa.container temos dois elementos container__caixa, os dois tem o mesmo tamanho, borda e fonte, exceto pela cor de fundo, então neste caso você poderia atribuir a classe container__caixa--[cor] no elemento que terá a cor de fundo diferente, e no CSS apenas alterar o background-color para este elemento, facilitando a manutenção e reutilização do código.Código:
<!-- BLOCO -->
<section class="container">
<!-- ELEMENTO - FILHO DO BLOCO -->
<div class="container__caixa">
...
</div>
<!-- ELEMENTO - FILHO DO BLOCO, SEMELHANTE AO ANTERIOR, PORÉM COM A COR DE FUNDO DIFERENTE -->
<div class="container__caixa container__caixa--azul">
...
</div>
</section>Expliquei com as minhas palavras, então espero que tenha ficado compreensível e recomendo que pesquise mais sobre, para saber mais a fundo e não sobrar dúvidas. tmj!
Oi Bianca, eu tive a mesma dúvida... ainda mais quando criei a segunda seção e os elementos não ficaram lado a lado.
Mas pelo que eu entendi, é o seguinte:
A instrutora usa a class="container principal" e "container secundario"
é como se ela tivesse criado duas classes, a primeira (Container) ela usa de forma geral para a estilização das seções, e a segunda class (principal ou secundario) para estilizar a seção especifica
sempre que ela chamar no css a classe container, as mudanças que ela faz, vai afetar as duas seções, pois as duas tem a classe container aí quando ela quer estilizar uma em especifico, ela usa o principal ou o secundario