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" > ?
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