Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] nome das classes

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

2 respostas
solução!

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:

  1. Bloco é o componente em si, é independente e geralmente vai ter outros elementos como filhos, por isso a nomenclatura é a mais simples, nesse caso apenas container.
  2. Elemento é o "filho", estes são dependentes do bloco e por isso sua nomenclatura herda o nome do pai, separado por __, ficando desta maneira: container__caixa.
  3. Modificador serve para indicar um estilo ou comportamento diferente nos elementos ou blocos, digamos que dentro do 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